共计 3481 个字符，预计需要花费 9 分钟才能阅读完成。
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
