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>

自定义图表完成！效果如下图所示：

官网地址：http://www.datagear.tech

源码地址：

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

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

DataGear 自定义数据可视化图表的更多相关文章

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

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

  2. Webstorm+Webpack+echarts构建个性化定制的数据可视化图表&&两个echarts详细教程（柱状图，南丁格尔图）

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

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

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

  4. 数据可视化图表ECharts

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

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

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

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

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

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

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

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

    English Document

  9. 开源来自百度商业前端数据可视化团队的超漂亮动态图表--ECharts

    开源来自百度商业前端数据可视化团队的超漂亮动态图表--ECharts 本人项目中最近有需要图表的地方,偶然发现一款超级漂亮的动态图标js图表控件,分享给大家,觉得好用的就看一下.更多更漂亮的演示大家可 ...

  10. 开源的数据可视化JavaScript图表库：ECharts

    ECharts (Enterprise Charts 商业产品图表库)是基于HTML5 Canvas的一个纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.创新的拖拽 ...

随机推荐

  1. SPECJVM2008 再学习

    SPECJVM2008 再学习 摘要 昨天的太水了 感觉今天有必要再水一点.. 存在的问题 默认进行启动 sunflow 必定过不去. 一般的解决办法要求进行重新编译 但是我不知道怎么下载源码... ...

  2. java 调优需要关闭的组建

  3. 海量数据 vastbase G100 V2.2安装简单总结

    海量数据vastbase G100 V2.2 安装总结 背景说明 最近进行信创四期的数据库兼容性验证, 获取了海量数据的一个信创名录内的安装介质. 一直忙于出差, 今天晚上趁着冬至回家比较早在家里进行 ...

  4. pytest-数据驱动

    今天介绍两种实现数据驱动的方法,json和excel,我们以获取企业微信token接口为例,共 有两个参数corpid&corpsecret 一.json 方法一:@pytest.mark.p ...

  5. 热更新适配ibatis原理浅析

    一.热更新解决了什么问题? 在研发过程中,每个研发同学在联调.自测阶段中总会频繁的去执行编译.构建.打包的动作,遇到比较大的项目,执行一套流程下来,往往需要3-10分钟左右,极大的降低了研发的速度,基 ...

  6. 记一次JSF异步调用引起的接口可用率降低

    前言 本文记录了由于JSF异步调用超时引起的接口可用率降低问题的排查过程,主要介绍了排查思路和JSF异步调用的流程,希望可以帮助大家了解JSF的异步调用原理以及提供一些问题排查思路.本文分析的JSF源 ...

  7. 【JS 逆向百例】浏览器插件 Hook 实战，亚航加密参数分析

    关注微信公众号:K哥爬虫,QQ交流群:808574309,持续分享爬虫进阶.JS/安卓逆向等技术干货! 声明 本文章中所有内容仅供学习交流,抓包内容.敏感网址.数据接口均已做脱敏处理,严禁用于商业用途 ...

  8. Registration Authority 简介

    RA 功能简介 在公共密钥基础设施(PKI)中,CA(Certificate Authority,证书颁发机构)系统的RA(Registration Authority,注册机构)是PKI体系结构的重 ...

  9. LeetCode刷题日记 2020/03/25

    力扣刷题继续! 题目:计算三维形体表面积 题干 在 N * N 的网格上,我们放置一些 1 * 1 * 1  的立方体. 每个值 v = grid[i][j] 表示 v 个正方体叠放在对应单元格 (i ...

  10. 到什么程度才叫精通 Linux？

    大家好,我是陶朱公Boy,一个认真生活,总想超越自己的程序员. 前言 知乎上有一个提问:到什么程度才叫精通 Linux?                              ↓↓↓ 今天,我们就 ...