DataGear 自定义数据可视化图表
DataGear内置了很多常用的图表(折线图、柱状图、饼图、散点图、雷达图、地图等等),能满足大部分数据可视化需求,当内置图表无法满足时,则可以通过自定义图表或插件的方式,实现特定业务的数据可视化需求。
自定义图表实现起来简单方便,只需为看板内的图表类型为自定义
的<div>
图表元素添加dg-chart-renderer
属性(图表渲染器),并实现其逻辑即可;自定义图表插件则稍复杂些,需要编写单独的插件包,并上传至系统,之后则可在整个系统内复用。
本文主要讲解自定义图表实现方式。
在开始自定义之前,需要了解的是,系统会为图表、看板展示页面自动引入Jquery(window.$)、ECharts(window.echarts)等JS库(具体参考官网文档内置看板资源章节),可以在自定义图表和插件中直接使用它们。
下面,以折线图为例,介绍如何通过自定义图表方式实现。
假设有如下各月份销售额数据集:
名称:
各月份销售额
数据:
month sales
1月 11
2月 41
3月 9
4月 20
5月 15
6月 18
属性(预览后系统自动解析而得,展示名称由用户选填):
名称 类型 展示名称
month 字符串 月份
sales 数值 销售额
假设有关联上述数据集,图表类型为自定义
的图表:
名称 :各月份销售额图表
图表类型 :自定义
数据集 :各月份销售额
自定义图表需要在看板内编写图表渲染器实现代码,因此,这里新建一个看板,并添加上述图表,内容如下:
<!DOCTYPE html>
<html>
<head>
...
<script type="text/javascript">
//自定义图表渲染器
var myChartRenderer=
{};
</script>
</head>
<body><div dg-chart-renderer="myChartRenderer" dg-chart-widget="[上述图表ID]"><!--各月份销售额图表--></div>
</body>
</html>
下面需要做的是实现 myChartRenderer
图表渲染器逻辑,它应至少实现如下两个函数(异步渲染、事件处理需要实现更多函数,具体参考官网文档图表渲染器章节):
{//初始渲染图表//chart 图表对象render: function(chart){ ... },//更新图表数据//chart 图表对象//results 要更新的数据集结果对象数组update: function(chart, results){ ... }
}
在实现上述两个函数之前,我们需要先了解一下两个参数 chart
和 results
的结构。
chart
表示图表对象,它封装了要渲染图表的基本信息、及其关联的数据集信息(由<div>
图表元素添加dg-chart-widget
属性指定),在本例中,它的基本结构如下所示:
{name: "各月份销售额图表",//图表关联的数据集信息,本例中只有一个chartDataSets:[{dataSet:{name: "各月份销售额",properties:[{name: "month", type: "STRING", label: "月份"},{name: "sales", type: "NUMBER", label: "销售额"}]}}],//图表所处的div图表元素ID,如果没有定义,系统会随机生成一个,并自动设置为div图表元素的id属性elementId: "..."
}
除了上述基本结构,chart
对象还定义了很多用于支持图表渲染、数据处理、事件处理等辅助API(详细参考官网文档图表对象章节),下面是几个比较基本的API:
//获取div图表元素DOM对象
chart.element()//获取div图表元素的Jquery对象
chart.elementJquery()//将图表初始化为ECharts图表,并返回ECharts实例对象
chart.echartsInit(options)//获取图表的ECharts实例对象
chart.echartsInstance()//设置图表的ECharts选项
chart.echartsOptions(options)//将图表原始数据集数据转换为名/值结构的数据
chart.resultNameValueObjects(result, nameProperty, valueProperty)
results
表示图表关联数据集的结果数据,与上述 chart
对象的 chartDataSets
数组元素一一对应,在本例中,它的结构如下所示:
[{data:[{month: "1月", sales: 11},{month: "2月", sales: 41},...]}
]
在了解 chart
、results
参数结构后,就可以使用它们来实现 myChartRenderer
的 render
和 update
函数了:
<!DOCTYPE html>
<html>
<head>
...
<script type="text/javascript">
//自定义图表渲染器
var myChartRenderer=
{render: function(chart){var chartDataSet = chart.chartDataSetMain();//图表标题:"各月份销售额图表"var title = chart.name;//图表X轴标签:"月份"var xAxisName = chart.dataSetPropertyAlias(chartDataSet, "month");//图表Y轴标签:"销售额"var yAxisName = chart.dataSetPropertyAlias(chartDataSet, "sales");//图例名、系列名:"各月份销售额"var seriesName = chart.dataSetAlias(chartDataSet);var options ={title: { text: title },legend: { data: [ seriesName ] },tooltip: { trigger: "axis" },xAxis: { name: xAxisName, type: "category", data: [] },yAxis: { name: yAxisName, type: "value" },series:[{name: seriesName,type: "line",data: []}]};//初始化EChartschart.echartsInit(options);},update: function(chart, results){var chartDataSet = chart.chartDataSetMain();var result = chart.resultOf(results, chartDataSet);//X轴刻度:[ "1月", "2月", ... ]var xAxisData = chart.resultRowArrays(result, "month");//折线数据:[ {name:"1月", value: 11}, {name:"2月", value: 41} ]var seriesData = chart.resultNameValueObjects(result, "month", "sales");var options = chart.inflateUpdateOptions(results,{xAxis: { data: xAxisData },series: [ { data: seriesData } ]});//更新图表数据chart.echartsOptions(options);}
};
</script>
</head>
<body><div dg-chart-renderer="myChartRenderer" dg-chart-widget="[上述图表ID]"><!--各月份销售额图表--></div>
</body>
</html>
自定义图表完成!效果如下图所示:
官网地址:
http://www.datagear.tech
源码地址:
Gitee:https://gitee.com/datagear/datagear
Github:https://github.com/datageartech/datagear
大屏模板地址:
https://gitee.com/datagear/DataGearDashboardTemplate
DataGear 自定义数据可视化图表相关推荐
- DataGear 自定义数据可视化图表插件
DataGear内置的70余种图表(折线图.柱状图.饼图.散点图.雷达图.地图.桑基图.K线图.箱形图.路径图等等),都是以图表插件的形式提供的,当这些内置图表无法满足应用需求时,则可以通过自定义图表 ...
- 数据可视化图表类型_数据可视化中12种最常见的图表类型
数据可视化图表类型 In the current era of large amounts of information in the form of numbers available everyw ...
- python怎么做图表好看_如何制作有趣好看的数据可视化图表?
工具方面 制作可视化各回答都忽略了一点,就是所展示数据的量和复杂度. 如果数据很简单,数据量很小(万行以内),数据很干净(很少有错误值和空缺值等),这种情况下如果为了单纯的图表可视化,建议用Excel ...
- 28个数据可视化图表的总结和介绍
数据可视化本身就是一种通用语言.我们这里通用语言的意思是:它能够向各行各业的人表示信息.它打破了语言和技术理解的障碍.数据是一些数字和文字的组合,但是可视化可以展示数据包含的信息. "数据可 ...
- python动态交互图表_Python 调用 matplotlib 实现交互式数据可视化图表案例
交互式的数据可视化图表是 New IT 新技术的一个应用方向,在过去,用户要在网页上查看数据,基本的实现方式就是在页面上显示一个表格出来,的而且确,用表格的方式来展示数据,显示的数据量会比较大,但是, ...
- echarts legend颜色_echarts数据可视化图表(二):双柱状图
echarts数据可视化图表(二):双柱状图 效果图: html js var loadEcharts09 = function () { var myChartss = echarts.init(d ...
- echart 数据视图_关于数据可视化图表的制作,你需要关注的30个小技巧
优秀的数据可视化图表只是罗列.总结数据吗?当然不是!数据可视化其真正的价值是设计出可以被读者轻松理解的数据展示,因此在设计过程中,每一个选择,最终都应落脚于读者的体验,而非图表制作者个人. 今天就给大 ...
- 【Python】20个小技巧,让数据可视化图表更专业!
参考 uxdesign Taras Bakusevych 数据可视化是数据展示的常见方式,所谓一图抵千言,好的图表能高效传递信息,让观众一目了然,差的图表往往会不知所云. 人类大脑的一半完全是用于处理 ...
- 数据可视化图表,你选对了吗?
戳蓝字"CSDN云计算"关注我们哦! Photo by Jason Coudriet on Unsplash 文 | 邻川 来源 | 阿里巴巴中间件 程序员懂画图,一宝变三宝. 继 ...
最新文章
- stm32之spi之NSS管脚信号
- PHP判断远程图片或文件是否存在
- php nodelist,了解NodeList、HTMLCollection以及NamedNodeMap的使用(代码)
- 马云电脑水平曝光;快狗打车回应裁员50% ;华为邀请开发者加入应用商店 | 极客头条...
- python爬虫英文单词_Python_爬虫百度英文学习词典
- Windows XP 32位环境下VS2008+DDKXP驱动开发环境配置
- 观察者研报 | Moon的崛起
- 计算机系统结构变革在即?
- c语言字符串输出有乱码,C语言puts函数输出乱码测试
- Win10 没有激活,如何改变任务栏位置
- 哈夫曼树(huffman)
- 多类隶属度的模糊支持向量机(FSVM)
- (1)JfreeChart之柱状图
- BZOJ 3709: [PA2014]Bohater 贪心
- 一文理解分布式常见的一致性算法
- java double转float_如何将double转换成float类型
- 利用python的turtle库画一个图形
- 杰奇cms mysql查询_杰奇cms自动推送链接插件使用方式
- linux添加一个nand设备,[教程]使用buildroot完全自定义自己的embedded linux系统(nand)...
- 联想thinkpad E420电脑蓝屏