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>

点击【保存并展示】按钮,打开看板展示页面,完成!!!

效果图如下所示:

image

image

image

官网地址:

http://www.datagear.tech

源码地址:

Gitee:https://gitee.com/datagear/datagear

Github:https://github.com/datageartech/datagear

posted @ 2022-11-11 09:45  DataGear  阅读(215)  评论(0编辑  收藏  举报