前言介紹
- 這款 WordPress 外掛「Page Charts」是 2022-02-14 上架。
- 目前尚無安裝啟用數，是個很新的外掛。如有要安裝使用，建議多測試確保功能沒問題！
- 上一次更新是 2022-05-06，距離現在已有 1094 天。超過一年沒更新，安裝要確認版本是否可用。以及後續維護問題！
- 外掛最低要求 WordPress 5.8.3 以上版本才可以安裝。
- 尚未有人給過這款外掛評分。
- 還沒有人在論壇上發問，可能目前使用數不多，還沒有什麼大問題。
外掛協作開發者
sidov |
外掛標籤
Pie | line | chart | column | highcharts |
內容簡介
這個外掛讓您可以在網站的任何頁面或文章上嵌入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:
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”.
各版本下載點
- 方法一：點下方版本號的連結下載 ZIP 檔案後，登入網站後台左側選單「外掛」的「安裝外掛」，然後選擇上方的「上傳外掛」，把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
- 方法二：透過「安裝外掛」的畫面右方搜尋功能，搜尋外掛名稱「Page Charts」來進行安裝。
（建議使用方法二，確保安裝的版本符合當前運作的 WordPress 環境。
延伸相關外掛（你可能也想知道）
Make Column Clickable Elementor 》簡單：允許用戶點擊整個列而非單個元素。, 當您在其中添加鏈接時，用戶將能夠點擊整個列。, 如何使用, 安裝插件後，在Elementor編輯器中打開，開始編輯列，並...。
Admin Columns 》這個 WordPress 外掛可以管理並整理文章、使用者、評論及媒體列表的欄位。它讓 WordPress 後台界面變得更美觀、明確。, , Admin Columns Pro, Admin Columns ...。
Column Shortcodes 》此外掛提供簡單易用的短碼，在您的文章或頁面中輕鬆創建欄位。有時候，您只需要將網頁切成不同的欄位。使用此外掛，您只需選擇一個欄位的短碼，便可將欄位加...。
TemplatesNext ToolKit 》這個外掛提供了許多必要的元素，如簡歷、團隊成員、推薦評價、輪播、WooCommerce 產品清單等等，使用短代碼、SiteOrigin Page Builder 或 Elementor widget ...。
Equal Height Columns 》相容於 PHP 8.0, 喜歡這個外掛嗎？請考慮留下5星評價。, Equal Height Columns 讓你輕鬆平等化不同欄位和元素的高度。, 特色, , 可佈局無限元素和元素組, 指...。
Genesis Widget Column Classes 》使用起來非常簡單。您可以透過下拉式選單為小工具新增欄位類別，並檢查小工具是否為第一個，最後儲存即可！, 我針對 Genesis Framework 建立了這個外掛程式，...。
ACF Columns 》使用 ACF Columns（ACF欄位佈局外掛）可以在文章編輯器中將ACF欄位排成欄位群組。, 使用新的ACF 5.7，可以在不同的欄位中使用條件邏輯。, 對於每個欄位，請在...。
Gridable – The Missing Grid Content Editor 》Gridable 是 WordPress 愛好者建立靈活可靠格線的巧妙解決方案。我們的外掛與 WordPress 編輯器介面順暢整合，因此無論您是否有技術背景，都可適用。它簡化了...。
Advanced Post Manager 》這是一個針對開發者所設計的工具，可以透過添加 metadata、taxonomy 等資訊來協助加強自訂文章類型的列表功能。此外，也提供直觀的介面讓您可以添加及儲存複...。
eVision Responsive Column Layout Shortcodes 》此 WordPress 外掛可透過在內容周圍包裝簡碼 (shortcode)，讓文章和頁面輕鬆添加具有回應性 (Bootstrap) 的欄位配置。, 使用外掛的編輯器按鈕添加欄位，或簡...。
Three Column Screen Layout 》從文章編輯器的「螢幕選項」選單中選擇額外的佈局。, 現在有 24 款變化可供選擇！。
Sortable Word Count Reloaded 》加入一個可以排序的欄位至文章和頁面管理列表中，顯示每個頁面/文章的字數。, 這個外掛可以讓你在列表視圖中看到文章和頁面的字數，並進行排序。, 這個外掛是...。
Responsive Column Widgets 》使用 Widget 在文章中顯示具有響應式欄位, 您想要將 Widget 水平排列嗎？如果是，這個外掛程式可能是您的解決方案。, 將想要的 Widget 加入外掛程式建立的自...。
Featured Image Column 》自版本 0.2.2 起，您可以選擇要在哪些文章類型中加入圖片列。, 這只是在標題（最左邊）之前新增了一列，如果這個文章支援特色圖片並且已存在，它就會顯示。, ...。
WEN Responsive Columns 》WEN Responsive Columns 是一個外掛，提供你使用簡單的短碼 [wrc_column] 來製作分欄式內容。只需使用這個短碼就能輕鬆地產生多個欄位混搭的效果，格線數可選...。