[wordpress插件] TablePress Extension: ChartistTablePress扩展：图表专家

Using Chartist.js, this Chartist.js ，此

org/plugins/tablepress/">TablePress Extension creates a responsive chart based on the data in a TablePress table.

org / plugins / tablepress /“> TablePress 扩展程序基于TablePress表中的数据创建响应式图表。

Use

使用

Add the Shortcode [table-chart id=123 /] to a post or page to create a chart from the TablePress table 123.

将简码 [table-chart id = 123 /] 添加到帖子或页面上，以使用TablePress表123创建图表。

Optional parameters:

可选参数：

• Show/hide chart line: showline=true (default: true)
• 显示/隐藏图表线： showline = true （默认值：true）

• Show/hide show chart area: showarea=false (default: false)
• 显示/隐藏显示图表区域： showarea = false （默认值：false）

• Set chart y low: low=0 (default: table low)
• 将图表y设置为低： low = 0 （默认值：表格低）

• Set chart y high: high=10 (default: table high)
• 将图表y设置为高： high = 10 （默认值：表格高）

• Set line with of the donut chart: donut_width=200 (default: false)
• 用甜甜圈图设置一条线： donut_width = 200 （默认值：false）

• Enable/disable smooth line: linesmooth=true (default: true)
• 启用/禁用平滑线： linesmooth = true （默认值：true）

• Enable/disable line points: showpoint=true (default: true)
• 启用/禁用线点： showpoint = true （默认值：true）

• Enable/disable horizontal bars: horizontal=true (default: false)
• 启用/禁用水平条： horizo​​ntal = true （默认值：false）

• Enable/disable stacked bars: stack=true (default: false)
• 启用/禁用堆叠的条形： stack = true （默认值：false）

• Set chart aspect ratio: aspect_ratio=3:4 (default: 3:4) Alternatives: 1, 15:16, 8:9, 5:6, 4:5, 3:4

• 设置图表的宽高比： 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, or 1:4

，2：3、5：8、1：1.618、3：5、9：16、8：15、1：2、2：5、3：8、1：3或1：4

• Select chart type: chart=bar (default: line) Alternatives: line, bar, pie, donut, percent or piepercent (mix of pie and percent).
• 选择图表类型： chart = bar （默认值：折线）备选方案：折线，条形图，饼图，甜甜圈，百分比或piepercent（饼图和百分比的混合）。

• Set label offset: label_offset=100 (default: false)
• 设置标签偏移量： label_offset = 100 （默认值：false）

• Set chart padding: chart_padding=100 (default: false)
• 设置图表填充： chart_padding = 100 （默认值：false）

• Use animations (not available for all chart types): animation=buildup (default: false)
• 使用动画（不适用于所有图表类型）： animation = buildup （默认值：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

CSS定制

If you'd like to overide the default style

如果您想覆盖默认样式

, you can add a tablepress-chartist-custom.css in wp-content directory.

，您可以在 wp-content 目录中添加 tablepress-chartist-custom.css 。

It will be loaded after the Extension’s default CSS file libdist/chartist.min.css.

它将在扩展程序的默认CSS文件 libdist / chartist.min.css 之后加载。

Example:

示例：

/** 
  / ** 
* SVG Shape CSS properties: http://tutorials.jenkov.com/svg/svg-and-css.html#shape-css-properties 
* SVG Shape CSS属性：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系列-a，下一行是.ct系列-b等。* /
.ct-chart .ct-series.ct-series-a .ct-bar,
.ct-chart .ct-series.ct-series- .ct-bar，
.ct-chart .ct-series.ct-series-a .ct-line,
.ct-chart .ct-series.ct-series-.ct-line，
.ct-chart .ct-series.ct-series-a .ct-point  {    
.ct-chart .ct-series.ct-series- .ct-point {    
stroke: #073DA0;
笔划：＃073DA0；
}
}
.ct-series .ct-line, .ct-chart .ct-bar {    
.ct系列.ct行，.ct图表.ct-bar {    
fill: none;    
填充：无；    
stroke-width: 10px;
笔划宽度：10px；
}
}
.ct-chart .ct-point {    
.ct-chart .ct-point {    
stroke-width: 10px;    
笔划宽度：10px；    
stroke-linecap: round;
笔画线帽：圆形；
}
}