DataGear 制作折柱图数据可视化图表
利用 DataGear 看板的 自定义图表选项 功能,可以很方便地制作折柱图(或者折线-饼图、柱状-饼图)数据可视化图表。
假设有如下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>
点击【保存并展示】按钮,打开看板展示页面,完成!!!
效果图如下所示:
官网地址:
源码地址: