利用 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>

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

效果图如下所示:

官网地址:

http://www.datagear.tech

源码地址:

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

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

DataGear 制作折柱图数据可视化图表的更多相关文章

  1. Webstorm+Webpack+echarts构建个性化定制的数据可视化图表&&两个echarts详细教程(柱状图,南丁格尔图)

    Webstorm+Webpack+echarts   ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(I ...

  2. Excel数据可视化图表设计需要注意的几个问题

    ​大数据发展迅速的时代,数据分析驱动商业决策.对于庞大.无序.复杂的数据要是没经过合适的处理,价值就无法体现. 可以想象一本没有图片的教科书.没有图表.图形或是带有箭头和标签的插图或流程图,那么这门学 ...

  3. Python调用matplotlib实现交互式数据可视化图表案例

    交互式的数据可视化图表是 New IT 新技术的一个应用方向,在过去,用户要在网页上查看数据,基本的实现方式就是在页面上显示一个表格出来,的而且确,用表格的方式来展示数据,显示的数据量会比较大,但是, ...

  4. ECharts-基于Canvas,纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表

    ECharts http://ecomfe.github.com/echarts 基于Canvas,纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.创新的拖拽重计算 ...

  5. 数据可视化图表ECharts

    介绍: ECharts是一个基于ZRender(轻量级Canvas类库)的纯javascript图表库,提供可交互.个性化的数据可视化图表. ECharts提供了折线图.柱状图.散点图.饼图.K线图, ...

  6. 百度数据可视化图表套件echart实战

    最近我一直在做数据可视化的前端工作,我用的最多的绘图工具是d3.d3有点像photoshop,功能很强大,例子也很多,但是学习成本也不低,做项目是需要较大人力投入的.3月底由在亚马逊工作的同学介绍下使 ...

  7. 数据分析 | 数据可视化图表,BI工具构建逻辑

    本文源码:GitHub·点这里 || GitEE·点这里 一.数据可视化 1.基础概念 数据可视化,是关于数据视觉表现形式的科学技术研究.其中,这种数据的视觉表现形式被定义为,一种以某种概要形式抽取出 ...

  8. 📈📈📈📈📈iOS 图表框架 AAChartKit ---强大的高颜值数据可视化图表框架,支持柱状图、条形图、折线图、曲线图、折线填充图、曲线填充图、气泡图、扇形图、环形图、散点图、雷达图、混合图

    English Document

  9. 第六篇:R语言数据可视化之数据分布图(直方图、密度曲线、箱线图、等高线、2D密度图)

    数据分布图简介 中医上讲看病四诊法为:望闻问切.而数据分析师分析数据的过程也有点相似,我们需要望:看看数据长什么样:闻:仔细分析数据是否合理:问:针对前两步工作搜集到的问题与业务方交流:切:结合业务方 ...

  10. Echarts数据可视化,easyshu图表集成。

      介绍: ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Sa ...

随机推荐

  1. Booking.com如何在毫秒内搜索数百万个地点

    译自:How Booking.com Searches Through Millions of Locations in Milliseconds Booking.com是一家与酒店.旅馆.度假租赁等 ...

  2. kubernetes中不可见的OOM

    最近看了一篇文章:Tracking Down "Invisible" OOM Kills in Kubernetes,其讲述的是由于内存不足导致Pod中的进程被killed,但Po ...

  3. go中x/sync/semaphore解读

    semaphore semaphore的作用 如何使用 分析下原理 Acquire TryAcquire Release 总结 参考 semaphore semaphore的作用 信号量是在并发编程中 ...

  4. 19.7 Boost Asio 传输序列化数据

    序列化和反序列化是指将数据结构或对象转换为一组字节,以便在需要时可以将其存储在磁盘上或通过网络传输,并且可以在需要时重新创建原始对象或数据结构. 序列化是将内存中的对象转换为字节的过程.在序列化期间, ...

  5. Python 实现ARP扫描与欺骗

    ARP欺骗又称ARP毒化或ARP攻击,是针对以太网地址解析协议ARP的一种攻击技术,通过欺骗局域网内访问者PC的网关MAC地址,使访问者PC错以为攻击者更改后的MAC地址是网关的MAC,导致网络不通. ...

  6. Flask 框架:实现简单API测试接口

    通过使用Python中Flask框架实现一个简单的API接口程序,用户可发送JSON格式的请求,服务器响应请求,并以JSON格式将数据返回给用户,此处代码是一个模板可以测试接口时使用. Flask代码 ...

  7. Mygin中间件优化及logger日志中间件

    本篇是mygin的第七篇,参照gin框架,感兴趣的可以从 Mygin第一篇 开始看,Mygin从零开始完全手写,在实现的同时,带你一窥gin框架的核心原理实现. 目的 中间件Middleware优化 ...

  8. JuiceFS 在大搜车数据平台的实践

    大搜车已经搭建起比较完整的汽车产业互联网协同生态.在这一生态中,不仅涵盖了大搜车已经数字化的全国 90% 中大型二手车商.9000+ 家 4S 店和 70000+ 家新车二网,还包括大搜车旗下车易拍. ...

  9. webrtc终极版(二)搭建自己的iceserver服务,并用到RTCMultiConnection的demo中

    webrtc终极版(二)搭建自己的iceserver服务,并用到RTCMultiConnection的demo中 目录 webrtc终极版(二)搭建自己的iceserver服务,并用到RTCMulti ...

  10. typescript json 转 bean

    3个文件: 1.UserInfoGetResponse.ts class UserInfoGetResponse{ private userId: number; private userName: ...