DataGear 自定义数据可视化图表
DataGear内置了很多常用的图表(折线图、柱状图、饼图、散点图、雷达图、地图等等),能满足大部分数据可视化需求,当内置图表无法满足时,则可以通过自定义图表或插件的方式,实现特定业务的数据可视化需求。
自定义图表实现起来简单方便,只需为看板内的图表类型为【自定义】的<div>
图表元素添加dg-chart-renderer属性(图表渲染器),并实现其逻辑即可;自定义图表插件则稍复杂些,需要编写单独的插件包,并上传至系统,之后则可在整个系统内复用。
本文主要讲解自定义图表实现方式。
在开始自定义之前,需要了解的是,系统会为图表、看板展示页面自动引入Jquery(window.$)
、ECharts(window.echarts)
等JS库(具体参考官网文档内置看板资源章节),可以在自定义图表和插件中直接使用它们。
下面,以折线图为例,介绍如何通过自定义图表方式实现。
假设有如下各月份销售额CSV数据集:
名称:
各月份销售额
数据:
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]"
style="width:500px;height:300px;"><!--各月份销售额图表--></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()
//构建图表渲染options
chart.inflateRenderOptions()
//将图表初始化为ECharts图表,并返回ECharts实例对象
chart.echartsInit(options)
//将图表原始数据集数据转换为名/值结构的数据
chart.resultNameValueObjects(result, nameProperty, valueProperty)
//构建图表更新options
chart.inflateUpdateOptions()
//设置图表的ECharts选项
chart.echartsOptions(options)
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 = chart.inflateRenderOptions(
{
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: []
}]
});
//初始化ECharts
chart.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 class="dg-dashboard">
<div class="dg-chart"
dg-chart-renderer="myChartRenderer"
dg-chart-widget="[上述图表ID]"
style="width:500px;height:300px;"></div>
</body>
</html>
自定义图表完成!效果如下图所示:
源码地址:
Gitee:https://gitee.com/datagear/datagear
Github:https://github.com/datageartech/datagear
DataGear 自定义数据可视化图表的更多相关文章
- Python调用matplotlib实现交互式数据可视化图表案例
交互式的数据可视化图表是 New IT 新技术的一个应用方向,在过去,用户要在网页上查看数据,基本的实现方式就是在页面上显示一个表格出来,的而且确,用表格的方式来展示数据,显示的数据量会比较大,但是, ...
- Webstorm+Webpack+echarts构建个性化定制的数据可视化图表&&两个echarts详细教程(柱状图,南丁格尔图)
Webstorm+Webpack+echarts ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(I ...
- ECharts-基于Canvas,纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表
ECharts http://ecomfe.github.com/echarts 基于Canvas,纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.创新的拖拽重计算 ...
- 数据可视化图表ECharts
介绍: ECharts是一个基于ZRender(轻量级Canvas类库)的纯javascript图表库,提供可交互.个性化的数据可视化图表. ECharts提供了折线图.柱状图.散点图.饼图.K线图, ...
- Excel数据可视化图表设计需要注意的几个问题
大数据发展迅速的时代,数据分析驱动商业决策.对于庞大.无序.复杂的数据要是没经过合适的处理,价值就无法体现. 可以想象一本没有图片的教科书.没有图表.图形或是带有箭头和标签的插图或流程图,那么这门学 ...
- 数据分析 | 数据可视化图表,BI工具构建逻辑
本文源码:GitHub·点这里 || GitEE·点这里 一.数据可视化 1.基础概念 数据可视化,是关于数据视觉表现形式的科学技术研究.其中,这种数据的视觉表现形式被定义为,一种以某种概要形式抽取出 ...
- 百度数据可视化图表套件echart实战
最近我一直在做数据可视化的前端工作,我用的最多的绘图工具是d3.d3有点像photoshop,功能很强大,例子也很多,但是学习成本也不低,做项目是需要较大人力投入的.3月底由在亚马逊工作的同学介绍下使 ...
- 📈📈📈📈📈iOS 图表框架 AAChartKit ---强大的高颜值数据可视化图表框架,支持柱状图、条形图、折线图、曲线图、折线填充图、曲线填充图、气泡图、扇形图、环形图、散点图、雷达图、混合图
English Document
- 开源来自百度商业前端数据可视化团队的超漂亮动态图表--ECharts
开源来自百度商业前端数据可视化团队的超漂亮动态图表--ECharts 本人项目中最近有需要图表的地方,偶然发现一款超级漂亮的动态图标js图表控件,分享给大家,觉得好用的就看一下.更多更漂亮的演示大家可 ...
- 开源的数据可视化JavaScript图表库:ECharts
ECharts (Enterprise Charts 商业产品图表库)是基于HTML5 Canvas的一个纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.创新的拖拽 ...
随机推荐
- express实现批量删除和分页
后端代码批量删除 // 批量删除 router.get('/manyDel', function (req, res) { let { ids } = req.query if (ids&&a ...
- 【笔记】vm-storage的go profile调用图表(没什么实际意义,就是为了做笔记)
作者:张富春(ahfuzhang),转载时请注明作者和引用链接,谢谢! cnblogs博客 zhihu Github 公众号:一本正经的瞎扯 1.启动 force merge curl -G &quo ...
- vs不同版本支持的c++版本和PlatformToolset,及在vs中切换c++版本
找c++资料从网上找确实更快速,但要想深入地理解vc++建议看msdn文档. vs不同版本支持的c++版本 C++17: vs2017基本支持,vs2015部分支持. C++14: vs2017就可以 ...
- Python 探索性数据分析工具(PandasGUI,Pandas Profiling,Sweetviz,dtale)以及学术论文快速作图science.mplstyle
如果探索的数据集侧重数据展示,可以选PandasGUI:如果只是简单了解基本统计指标,可以选择Pandas Profiling和Sweetviz:如果需要做深度的数据探索,那就选择dtale. 1. ...
- trick1---实现tensorflow和pytorch迁移环境教学
相关文章: [一]tensorflow安装.常用python镜像源.tensorflow 深度学习强化学习教学 [二]tensorflow调试报错.tensorflow 深度学习强化学习教学 [三]t ...
- 8.6 C++ 泛型化编程态
C/C++语言是一种通用的编程语言,具有高效.灵活和可移植等特点.C语言主要用于系统编程,如操作系统.编译器.数据库等:C语言是C语言的扩展,增加了面向对象编程的特性,适用于大型软件系统.图形用户界面 ...
- .net 工具箱不可用/怎样初始化vs环境 解决方案
在开始菜单里面执行的.开始菜单->Microsoft Visual Studio 2005->Visual Studio Tools->Visual Studio 2005 命令提示 ...
- 面向对象之trait
面向对象之trait 场景 一个web站点,它有很多不同的类:用户(User).页面(Page).联系表单(ContactFrom)等.我们可能需要在每个类中添加一个方法的定义,但是这样的话就会造成不 ...
- P6824 「EZEC-4」可乐 题解
题目链接:可乐 一开始想着 0-1 Trie,枚举 \(x\) 去写,然后判断就行了.然后想起南京区域赛的 C 题,其实和这个也有点大同小异的感觉,可以用更朴素的办法,找到对于一个 \(a_i\) 而 ...
- pandas教程01: pandas的安装和基本操作
pandas是Python中常用的数据处理库,主要用来处理表格数据,类似于下面这种: 好好干文化有限公司员工薪资表 姓名 年龄 性别 年薪 奖金 久九刘 35 男 182600 42000 傅儿待 ...