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>
点击【保存并展示】按钮，打开看板展示页面，完成！！！
效果图如下所示：
官网地址：
源码地址：
Gitee：https://gitee.com/datagear/datagear
Github：https://github.com/datageartech/datagear
DataGear 制作折柱图数据可视化图表的更多相关文章
- Webstorm+Webpack+echarts构建个性化定制的数据可视化图表&&两个echarts详细教程（柱状图，南丁格尔图）
Webstorm+Webpack+echarts ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(I ...
- Excel数据可视化图表设计需要注意的几个问题
大数据发展迅速的时代,数据分析驱动商业决策.对于庞大.无序.复杂的数据要是没经过合适的处理,价值就无法体现. 可以想象一本没有图片的教科书.没有图表.图形或是带有箭头和标签的插图或流程图,那么这门学 ...
- Python调用matplotlib实现交互式数据可视化图表案例
交互式的数据可视化图表是 New IT 新技术的一个应用方向,在过去,用户要在网页上查看数据,基本的实现方式就是在页面上显示一个表格出来,的而且确,用表格的方式来展示数据,显示的数据量会比较大,但是, ...
- ECharts-基于Canvas，纯Javascript图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表
ECharts http://ecomfe.github.com/echarts 基于Canvas,纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.创新的拖拽重计算 ...
- 数据可视化图表ECharts
介绍: ECharts是一个基于ZRender(轻量级Canvas类库)的纯javascript图表库,提供可交互.个性化的数据可视化图表. ECharts提供了折线图.柱状图.散点图.饼图.K线图, ...
- 百度数据可视化图表套件echart实战
最近我一直在做数据可视化的前端工作,我用的最多的绘图工具是d3.d3有点像photoshop,功能很强大,例子也很多,但是学习成本也不低,做项目是需要较大人力投入的.3月底由在亚马逊工作的同学介绍下使 ...
- 数据分析 | 数据可视化图表，BI工具构建逻辑
本文源码:GitHub·点这里 || GitEE·点这里 一.数据可视化 1.基础概念 数据可视化,是关于数据视觉表现形式的科学技术研究.其中,这种数据的视觉表现形式被定义为,一种以某种概要形式抽取出 ...
- 📈📈📈📈📈iOS 图表框架 AAChartKit ---强大的高颜值数据可视化图表框架,支持柱状图、条形图、折线图、曲线图、折线填充图、曲线填充图、气泡图、扇形图、环形图、散点图、雷达图、混合图
English Document
- 第六篇：R语言数据可视化之数据分布图（直方图、密度曲线、箱线图、等高线、2D密度图）
数据分布图简介 中医上讲看病四诊法为:望闻问切.而数据分析师分析数据的过程也有点相似,我们需要望:看看数据长什么样:闻:仔细分析数据是否合理:问:针对前两步工作搜集到的问题与业务方交流:切:结合业务方 ...
- Echarts数据可视化，easyshu图表集成。
介绍: ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Sa ...
随机推荐
- DPText-DETR: 基于动态点query的场景文本检测，更高更快更鲁棒 | 京东探索研究院
针对场景文本检测任务,近期基于DEtection TRansformer (DETR) 框架预测控制点的研究工作较为活跃.在基于DETR的检测器中,query的构建方式至关重要,现有方法中较为粗糙的位 ...
- TienChin 渠道管理-配置字典常量
在字典管理当中添加渠道状态 channel_status:渠道状态 分别为: 正常,键值为1,回显样式为 success 禁用,键值为0,回显样式为 info !> 有个注意点:Vue3 当中 ...
- 【四】-强化学习入门简介---PaddlePaddlle强化学习及PARL框架
相关文章: [一]飞桨paddle[GPU.CPU]安装以及环境配置+python入门教学 [二]-Parl基础命令 [三]-Notebook.&pdb.ipdb 调试 [四]-强化学习入门简 ...
- Python 使用sigthief签发证书
Windows 系统中的一些非常重要文件通常会被添加数字签名,其目的是用来防止被篡改,能确保用户通过互联网下载时能确信此代码没有被非法篡改和来源可信,从而保护了代码的完整性.保护了用户不会被病毒.恶意 ...
- SSD数据不能恢复？或许还有的救
我们经常说机械硬盘相对于固态硬盘的一个优势是数据可以恢复,难道SSD固态硬盘的数据就不能恢复了吗? 这里先简单介绍一下SSD的工作方式,SSD中的数据是以电子的形式通过浮栅保存的,写入就是通过增加电压 ...
- Typora Mac中文破解版获取
作为程序员,markdown是非常好用的文本编辑语言,而Typora是非常好用的一款markdown编辑工具.Typora提供读者和作家的无缝体验.它删除了预览窗口,模式切换器,降低源代码的语法符号以 ...
- Matter开发，看这一篇就够了
1. Matter介绍 Matter(以前称为 Project Connected Home over IP 或 Project CHIP)是由CSA联盟制定的一个应用层面的标准,旨在打造一个统一的智 ...
- DbgridEh 1900-01-01 00:00:00 问题解决
--------------------------------------------------
- Word-批量导出Word中的图片
当我们需要把Word文件中的图片保存起来,你是如何导出Word图片呢?右键一张张保存图片吗?这效率太低了.如果文档中有大量的图片,这个方法会浪费很多时间. 下面给大家分享word如何批量导出图片的技巧 ...
- Apache Hudi 设计与架构解读
1. 简介 Apache Hudi(简称:Hudi)允许您在现有的hadoop兼容存储之上存储大量数据,同时提供两种原语,使得除了经典的批处理之外,还可以在数据湖上进行流处理. 这两种原语分别是: 1 ...