6.3. 图表渲染器

图表渲染器用于为自定义图表、自定义图表插件实现渲染逻辑，它的格式如下所示：

  1. {
  2.   //可选，渲染图表函数是否是异步函数，默认为false
  3.   //chart 图表对象
  4.   asyncRender: true、false、function(chart){ ...; return true 或者 false; }
  6.   //必选，渲染图表函数
  7.   //chart 图表对象
  8.   render: function(chart){ ... },
  10.   //可选，更新图表数据函数是否是异步函数，默认为false
  11.   //chart 图表对象
  12.   //results 数据集结果对象数组
  13.   asyncUpdate: true、false、function(chart, results){ ...; return true 或者 false; }
  15.   //必选，更新图表数据函数
  16.   //chart 图表对象
  17.   //results 要更新的数据集结果对象数组
  18.   update: function(chart, results){ ... },
  20.   //可选，调整图表尺寸函数，希望图表支持dg-chart-auto-resize时应该定义
  21.   //chart 图表对象
  22.   resize: function(chart){ ... },
  24.   //可选，绑定图表事件处理函数，希望图表支持dg-chart-link、dg-chart-on-*时应该定义
  25.   //chart 图表对象
  26.   //eventType 事件类型，比如："click"、"mouseover"等
  27.   //handler 图表事件处理函数，格式为：function(chartEvent){ ... }
  28.   on: function(chart, eventType, handler){ ... },
  30.   //可选，解绑图表事件处理函数
  31.   //chart 图表对象
  32.   //eventType 事件类型
  33.   //handler 图表事件处理函数引用
  34.   off: function(chart, eventType, handler){ ... },
  36.   //可选，销毁图表函数
  37.   //chart 图表对象
  38.   destroy: function(chart){ ... }
  39. }

如果asyncRender返回true， 那么在render函数中完成异步操作后， 应该调用chart.statusRendered(true)，表明已完成异步渲染。

如果asyncUpdate返回true， 那么在update函数中完成异步操作后， 应该调用chart.statusUpdated(true)，表明已完成异步更新数据。

如果希望图表支持dg-chart-link特性， 那么对于on函数，应该构建规范的图表事件对象传递给图表事件处理函数。 通常的做法是：先捕获底层图表元素事件（比如Echarts事件、HTML事件），然后使用 chart.eventNewEcharts()、 chart.eventNewHtml()、 chart.eventData()、 chart.eventOriginalData() 构建 图表事件对象， 最后调用图表事件处理函数。