內容簡介
此外掛使用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;
}
外掛標籤
開發者團隊
② 後台搜尋「TablePress Extension: Chartist」→ 直接安裝（推薦）
原文外掛簡介
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;
}
