前言介紹
- 這款 WordPress 外掛「TablePress Extension: Chartist」是 2017-01-19 上架。
- 目前有 800 個安裝啟用數。
- 上一次更新是 2022-04-21，距離現在已有 1407 天。超過一年沒更新，安裝要確認版本是否可用。以及後續維護問題！
- 外掛最低要求 WordPress 5.9 以上版本才可以安裝。
- 有 5 人給過評分。
- 還沒有人在論壇上發問，可能目前使用數不多，還沒有什麼大問題。
外掛協作開發者
外掛標籤
chart | table | responsive | tablepress |
內容簡介
此外掛使用Chartist.js製作，可根據TablePress表格中的資料建立回應式圖表。
使用方式
在文章或頁面中新增縮寫碼[table-chart id=123 /]，以從TablePress表格123建立圖表。
選擇性參數:
顯示/隱藏圖表線條：showline=true（預設值：true）
顯示/隱藏圖表區域：showarea=false（預設值：false）
設定圖表y底線：low=0（預設值：表格低）
設定圖表y頂線：high=10（預設值：表格高）
設定甜甜圈圖表的線條寬度：donut_width=200（預設值：false）
啟用/禁用平滑線條：linesmooth=true（預設值：true）
啟用/禁用線條點：showpoint=true（預設值：true）
啟用/禁用水平條形圖：horizontal=true（預設值：false）
啟用/禁用堆疊條形圖：stack=true（預設值：false）
設定圖表長寬比：aspect_ratio=3:4（預設值：3:4）另類選擇：1、15:16、8:9、5:6、4:5、3:4、2:3、5:8、1:1.618、3:5、9:16、8:15、1:2、2:5、3:8、1:3或1:4
選擇圖表類型：chart=bar（預設值：line）替代選擇：line、bar、pie、donut、percent或piepercent（混合了pie和percent）。
設定標籤位移量：label_offset=100（預設值：false）
設定圖表填充：chart_padding=100（預設值：false）
使用動畫效果（不適用於所有圖表類型）：animation=buildup（預設值：false）
如果表格的「表格標題行」選項已啟用，則擴展程式將使用表頭資料作為圖表標籤。
其他行將顯示為線條或條形。圓餅圖或百分比圖表只會使用第一個資料行。百分比圖表會忽略標頭行。
自訂CSS
如果您想覆蓋預設樣式，可以在wp-content目錄中新增tablepress-chartist-custom.css。它會在擴展程式的預設CSS檔libdist/chartist.min.css後載入。
範例:
/**
* SVG Shape CSS properties: http://tutorials.jenkov.com/svg/svg-and-css.html#shape-css-properties
*/
/* First line / bar is .ct-series-a, next is .ct-series-b etc. */
.ct-chart .ct-series.ct-series-a .ct-bar,
.ct-chart .ct-series.ct-series-a .ct-line,
.ct-chart .ct-series.ct-series-a .ct-point {
stroke: #073DA0;
}
.ct-series .ct-line, .ct-chart .ct-bar {
fill: none;
stroke-width: 10px;
}
.ct-chart .ct-point {
stroke-width: 10px;
stroke-linecap: round;
}
原文外掛簡介
Using Chartist.js, this TablePress Extension creates a responsive chart based on the data in a TablePress table.
Use
Add the Shortcode [table-chart id=123 /] to a post or page to create a chart from the TablePress table 123.
Optional parameters:
Show/hide chart line: showline=true (default: true)
Show/hide show chart area: showarea=false (default: false)
Set chart y low: low=0 (default: table low)
Set chart y high: high=10 (default: table high)
Set line with of the donut chart: donut_width=200 (default: false)
Enable/disable smooth line: linesmooth=true (default: true)
Enable/disable line points: showpoint=true (default: true)
Enable/disable horizontal bars: horizontal=true (default: false)
Enable/disable stacked bars: stack=true (default: false)
Set chart aspect ratio: aspect_ratio=3:4 (default: 3:4) Alternatives: 1, 15:16, 8:9, 5:6, 4:5, 3:4, 2:3, 5:8, 1:1.618, 3:5, 9:16, 8:15, 1:2, 2:5, 3:8, 1:3, or 1:4
Select chart type: chart=bar (default: line) Alternatives: line, bar, pie, donut, percent or piepercent (mix of pie and percent).
Set label offset: label_offset=100 (default: false)
Set chart padding: chart_padding=100 (default: false)
Use animations (not available for all chart types): animation=buildup (default: false)
If the “Table Head Row” option is enabled for the table, the Extension will use the head row data for the chart labels.
The other rows will be shown as lines or bars. Pie or percent charts will only use the first data row. Percent charts will ignore the header row.
CSS customizations
If you’d like to overide the default style, you can add a tablepress-chartist-custom.css in wp-content directory. It will be loaded after the Extension’s default CSS file libdist/chartist.min.css.
Example:
/**
* SVG Shape CSS properties: http://tutorials.jenkov.com/svg/svg-and-css.html#shape-css-properties
*/
/* First line / bar is .ct-series-a, next is .ct-series-b etc. */
.ct-chart .ct-series.ct-series-a .ct-bar,
.ct-chart .ct-series.ct-series-a .ct-line,
.ct-chart .ct-series.ct-series-a .ct-point {
stroke: #073DA0;
}
.ct-series .ct-line, .ct-chart .ct-bar {
fill: none;
stroke-width: 10px;
}
.ct-chart .ct-point {
stroke-width: 10px;
stroke-linecap: round;
}
各版本下載點
- 方法一：點下方版本號的連結下載 ZIP 檔案後，登入網站後台左側選單「外掛」的「安裝外掛」，然後選擇上方的「上傳外掛」，把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
- 方法二：透過「安裝外掛」的畫面右方搜尋功能，搜尋外掛名稱「TablePress Extension: Chartist」來進行安裝。
（建議使用方法二，確保安裝的版本符合當前運作的 WordPress 環境。
0.7 | 0.8 | 0.9 | trunk | 0.10.1 |
延伸相關外掛（你可能也想知道）
Table Sorter 》Table Sorter 將標準的HTML表格 (包括THEAD和TBODY標籤) 轉換為可排序的表格，而無需重新整理頁面。它可以對任何表格進行排序，不論是在WordPress模板（主題...。
ACF: TablePress 》這是為了深受歡迎的Advanced Custom Fields和TablePress插件所設計的擴展。這個插件本身是沒有任何功能的。, 這個Advanced Custom Fields的附加功能建立了一...。
inDiv for TablePress 》這是一個針對 TablePress 的自訂擴充功能，可以自動將表格包裝在 DIV 元素中。在表格中加入 indiv=true，就可以將 TablePress 表格包裝在具有「indiv_tablepr...。