利用 DataGear 看板的 自定义图表选项(dg-chart-options)功能,可以很方便地制作折柱图(或者折线-饼图、柱状-饼图)数据可视化图表。
假设有如下CSV数据集,包括名称和两个指标值数据:
名称, 指标0, 指标1 1月, 35, 118 2月, 50, 60 3月, 60, 40 4月, 80, 90
首先,新建柱状图表:
名称:折柱图 图表类型:基本柱状图 数据集:上述数据集 数据标记: 名称 -> 名称 (name) 指标0 -> 数值 (value) 指标1 -> 数值 (value)
然后,新建看板,插入上述图表,并设置 dg-chart-options,将第一个系列类型设置为柱状图(bar),第二个系列类型设置为折线图(line):
<!DOCTYPE html> <html> ... <body> ... <div dg-chart-options="{series:[{type:'bar'},{type:'line'}]}" dg-chart-widget="..."></div> ... </body> </html>
同理,折线-饼图的配置项为:
<!DOCTYPE html> <html> ... <body> ... <div dg-chart-options="{series:[{type:'line'},{type:'pie',radius:'50%',center:['80%','55%']}]}" dg-chart-widget="..."></div> ... </body> </html>
柱状-饼图配置项为:
<!DOCTYPE html> <html> ... <body> ... <div dg-chart-options="{series:[{type:'bar'},{type:'pie',radius:'35%',center:['20%','35%']}]}" dg-chart-widget="..."></div> ... </body> </html>
点击[保存并展示]按钮,打开看板展示页面,完成!!!
效果图如下所示: