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. [转贴]细说：Unicode, UTF-8, UTF-16, UTF-32, UCS-2, UCS-4

    细说:Unicode, UTF-8, UTF-16, UTF-32, UCS-2, UCS-4 https://www.cnblogs.com/malecrab/p/5300503.html 1. U ...

  2. Redux和@reduxjs/toolkit的使用

    1. 简介: Redux 是一种用于管理应用程序状态的 JavaScript 库.它是一个可预测的状态容器,可以用于编写 可维护和可扩展的应用程序. @reduxjs/toolkit 是一个官方提供的 ...

  3. P7031 [NWRRC2016] Anniversary Cake

    题目简述 有一块 \(n \times m\) 的长方形蛋糕.蛋糕上有两个蜡烛,分别用 \((x_1,y_1)\) 和 \((x_2,y_2)\) 表示.现在有一把刀要把蛋糕切成两半,请问切入的终点和 ...

  4. 每日一道面试题：Java中序列化与反序列化

    写在开头 哈喽大家好,在高铁上码字的感觉是真不爽啊,小桌板又拥挤,旁边的小朋友也比较的吵闹,影响思绪,但这丝毫不影响咱学习的劲头!哈哈哈,在这喧哗的车厢中,思考着这样的一个问题,Java中的对象是如何 ...

  5. Elasticsearch Relevance Engine---为AI变革提供高级搜索能力[ES向量搜索、常用配置参数、聚合功能等详解]

    Elasticsearch Relevance Engine---为AI变革提供高级搜索能力[ES向量搜索.常用配置参数.聚合功能等详解] 今天要介绍的 Elasticsearch Relevance ...

  6. win10 局域网共享文件创建方法

    win10 局域网共享文件创建方法 1.先在桌面文件夹,我命名为"xxxx",然后将文件放在该文件里. 2.右击共享文件夹,找到属性选项,点击"属性".再点击& ...

  7. 洛谷P1308统计单词数，strtok函数的使用以及对于单词分割的一些思考

    [NOIP2011 普及组] 统计单词数 题目描述 一般的文本编辑器都有查找单词的功能,该功能可以快速定位特定单词在文章中的位置,有的还能统计出特定单词在文章中出现的次数. 现在,请你编程实现这一功能 ...

  8. Linux Shell获取指定日期 N 天/月/年前(后)的日期

    我们有时候在写批处理 Shell 脚本时,可能需要获取指定日期前(后) N 天/月/年的日期,这里的 N 可以是 1 天/月/年.2 天/月/年.3 天/月/年等等.方法其实很简单,这里做一个简单记录 ...

  9. NC50390 布局 Layout

    题目链接 题目 题目描述 FJ有N头奶牛 \((2 \leq N \leq1000)\) ,编号为 \(1 \ldots N\) .奶牛们将按照编号顺序排成一列队伍(可能有多头奶牛在同一位置上).换句 ...

  10. NC16810 [NOIP1999]拦截导弹

    题目链接 题目 题目描述 某国为了防御敌国的导弹袭击,发展出一种导弹拦截系统.但是这种导弹拦截系统有一个缺陷:虽然它的第一发炮弹能够到达任意的高度,但是以后每一发炮弹都不能高于前一发的高度.某天,雷达 ...