內容簡介
這個外掛讓您可以在網站的任何頁面或文章上嵌入Chart和Highcharts軟體的圖表。
為此，您應該在此外掛的“js”目錄中包含上述其中一個庫。
對於每個圖表，您必須準備兩個文件：其中之一是帶有Highchart對象的JavaScript文件，
另一個是帶有用於圖表的數據的php文件。 PHP和JS之間的接口表示名為"data"的數組。
您可以將所有必要的變量和數組包含在此數組中以供Highchart對象使用。
例如，在php文件中：
$data= [['name'=> 'Installation','data'=> [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]],
[
'name'=> 'Manufacturing',
'data'=> [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
], [
'name'=> 'Sales & Distribution',
'data'=> [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
], [
'name'=> 'Project Development',
'data'=> [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
], [
'name'=> 'Other',
'data'=> [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
]];
在JavaScript文件中：
new Chart(document.getElementById("container"), {
...
data: data
...
}
如果您想在js中使用靜態數據，您應該準備一個帶有空數組"data"的php文件。
您應在“js”文件夾中包含所有js文件，並在“php”文件夾中包含所有php文件。
要在所選行中呈現圖表，您應該放置對應id的必要HTML標記。
對於Chart庫，您應該將canvas標記包裝在div標記內。
例如：
< div style=”width:800px; height = 450px !important;” > < canvas id=”container” class = “container” width=”800″ height=”450″ > < /canvas > < /div >
激活插件後，您應在管理面板的“插件”菜單中選擇“Page Charts”字段。
在下拉列表中，標籤為“Choose a chart library”，您應選擇適當的軟體。
不要忘記在外掛的“js”文件夾中包含所選的軟體庫！
您應在插件頁面上的表格中通過點擊“add new chart”來選擇要插入圖表的頁面或文章。
在出現的行中，您應放置您的php和js文件名，然後點擊“change”按鈕。
請確保頁面上div的id和javascript圖表對象的容器名稱相同。
如果您想在同一頁面上使用多個圖表，請使用“duplicate”按鈕並執行與上述相同的操作。
請勿忘記在同一頁面上使用不同的容器id！
您可以通過單擊“preview the chart”來預覽管理頁面上的圖表。
外掛標籤
開發者團隊
原文外掛簡介
This plagin lets you to embed charts of Chart and Highcharts softwares on any page or post of your site.
For this you should include one of above mentioned libraries in the “js” directiory of this plagin.
For every chart you must prepare two files : one of them it’s a javascript file with the Highchart object,
other one it’s a php file with data for chart. Interface between php and js represents array with the name “data”.
To this array you can include all variables and arrays necessary for the Highchart object.
For example in the php file:
$data= [['name'=> 'Installation','data'=> [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]],
[
'name'=> 'Manufacturing',
'data'=> [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
], [
'name'=> 'Sales & Distribution',
'data'=> [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
], [
'name'=> 'Project Development',
'data'=> [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
], [
'name'=> 'Other',
'data'=> [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
]];
In the javascript file:
new Chart(document.getElementById("container"), {
...
data: data
...
}
If you want to use static data right in the js you should prepare a php file with void array “data”.
All js files you should include in the folder “js” and php files in the “php” folder.
For rendering the chart on the chosen page You should put necessary HTML tag with the corresponding id
in the chosen line.
For Chart library you should wrap canvas tags in div tag.
For example:
< div style=”width:800px; height = 450px !important;” > < canvas id=”container” class = “container” width=”800″ height=”450″ > < /canvas > < /div >
After activating plagin you should select field “Page Charts” in the menu “Plagins” of your admin panel.
In the drop-down list with the label “Choose a chart library” you should choose appropriate software.
Do not forget to include chosen software library in the “js” folder of the plagin!
In the table on the the plagin page you should select page or post where you want to insert your chart by clicking
“add new chart”.
In the appeared line you should put the names of your php and js files and click “change”.
Be shure that id in your div on the page and container name of the javascript chart object are the same.
If you want to use several charts on the same page use “duplicate” button and do the same as above.
Don’t forget to use different container’s ids on the same page!
You can preview your chart on the admin page by clicking “preview the chart”.
