DataGear内置了很多常用的图表（折线图、柱状图、饼图、散点图、雷达图、地图等等），能满足大部分数据可视化需求，当内置图表无法满足时，则可以通过自定义图表或插件的方式，实现特定业务的数据可视化需求。
自定义图表实现起来简单方便，只需为看板内的图表类型为自定义的<div>图表元素添加dg-chart-renderer属性（图表渲染器），并实现其逻辑即可；自定义图表插件则稍复杂些，需要编写单独的插件包，并上传至系统，之后则可在整个系统内复用。
本文主要讲解自定义图表实现方式。
在开始自定义之前，需要了解的是，系统会为图表、看板展示页面自动引入Jquery（window.$）、ECharts（window.echarts）等JS库（具体参考官网文档内置看板资源章节），可以在自定义图表和插件中直接使用它们。
下面，以折线图为例，介绍如何通过自定义图表方式实现。
假设有如下各月份销售额数据集：
名称：
各月份销售额
数据：
monthsales1月 112月 413月 94月 205月 156月 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：/datagear/datagear
Github：/datageartech/datagear
大屏模板地址：
/datagear/DataGearDashboardTemplate
