DataGear内置了很多罕用的图表（折线图、柱状图、饼图、散点图、雷达图、地图等等），能满足大部分数据可视化需要，当内置图表无奈满足时，则能够通过自定义图表或插件的形式，实现特定业务的数据可视化需要。
自定义图表实现起来简略不便，只需为看板内的图表类型为【自定义】的<div>图表元素增加dg-chart-renderer属性（图表渲染器），并实现其逻辑即可；自定义图表插件则稍简单些，须要编写独自的插件包，并上传至零碎，之后则可在整个零碎内复用。
本文次要解说自定义图表实现形式。
在开始自定义之前，须要理解的是，零碎会为图表、看板展现页面主动引入Jquery（window.$）、ECharts（window.echarts）等JS库（具体参考官网文档内置看板资源章节），能够在自定义图表和插件中间接应用它们。
上面，以折线图为例，介绍如何通过自定义图表形式实现。
假如有如下各月份销售额CSV数据集：
名称：
各月份销售额数据：
month sales1月 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]" 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()//构建图表渲染optionschart.inflateRenderOptions()//将图表初始化为ECharts图表，并返回ECharts实例对象chart.echartsInit(options)//将图表原始数据集数据转换为名/值构造的数据chart.resultNameValueObjects(result, nameProperty, valueProperty)//构建图表更新optionschart.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