dg-chart-link

功能：设置图表联动功能，比如：在鼠标点击图表条目后，更新联动目标图表数据并刷新图表。

必填：否

元素：<div>图表元素

格式：

  1. {
  2.   //可选，触发联动的图表事件类型、事件类型数组，默认为"click"
  3.   trigger: "..."、["...", ...],
  4.   //必选，联动目标图表元素ID、ID数组
  5.   target: "..."、["...", ...],
  6.   //可选，联动数据参数映射表，没有则不设置任何参数值
  7.   data:
  8.   {
  9.     数据属性名 : 图表数据集参数索引对象、[ 图表数据集参数索引对象, ... ],
  10.     ...
  11.   }
  12. }

或者，也可以是上述格式对象的数组：

  1. [
  2.   { ... },
  3.   { ... }
  4. ]

其中

数据属性名可以是图表事件对象包含的 图表条目数据对象（chartEvent.data）的属性名， 也可以是原始数据对象（chartEvent.originalData）的属性名，它对应的属性值将作为映射源值。

数据属性名可以是简单的属性名，例如：”name”、”value”， 也可以是属性路径，例如：”order.name”、”[0].name”、”[‘order’].product.name”。

图表数据集参数索引对象用于定义数据属性名对应的值要设置到的目标图表数据集参数，格式为：

  1. {
  2.   //可选，目标图表在上述target数组中的索引数值，默认为：0
  3.   chart: ...,
  4.   //可选，目标图表数据集数组的索引数值，默认为：0
  5.   dataSet: ...,
  6.   //可选，目标图表数据集的参数数组索引/参数名，默认为：0
  7.   param: ...,
  8.   //可选，自定义数据属性值至目标参数值处理函数，返回目标参数值
  9.   //sourceValue 数据属性值
  10.   //chartEvent 图表事件对象
  11.   value: function(sourceValue, chartEvent){ return ...; }
  12. }

或者，可简写为图表数据集参数索引对象的”param”属性值。

示例：

  1. <head>
  2. <script type="text/javascript">
  3. var myChartLink={ target: 'chart6', data: { name: 0 } };
  4. </script>
  5. </head>
  6. <body>
  7. //当点击chart0图表条目时，
  8. //将图表事件对象数据的"name"属性值设置为chart1图表的第0个数据集的第0个参数值，
  9. //将图表事件对象数据的"value"属性值设置为chart1图表的第0个数据集的第1个参数值，
  10. //将图表事件对象数据的"value"属性值设置为chart1图表的第1个数据集的第0个参数值，
  11. //然后刷新chart1图表
  12. <div id="chart0" dg-chart-widget="..."
  13.     dg-chart-link="{target:'chart1',data:{name:0,value:[1,{dataSet: 1}]}}">
  14. </div>
  15. <div id="chart1" dg-chart-widget="..."></div>
  17. //当点击chart2图表条目时，
  18. //将图表事件对象数据的"name"属性值设置为chart3图表的第0个数据集的第0个参数值，
  19. //将图表事件对象数据的"name"属性值设置为chart4图表的第0个数据集的第0个参数值，
  20. //然后刷新chart3、chart4图表；
  21. //当双击chart2图表条目时，
  22. //将图表事件对象数据的"name"属性值设置为chart1图表的第0个数据集的第0个参数值，
  23. //然后刷新chart1图表
  24. <div id="chart2" dg-chart-widget="..."
  25.     dg-chart-link="[
  26.         {target:['chart3','chart4'],data:{name:[0,{chart:1}]}},
  27.         {trigger:'dblclick',target:'chart1',data:{name:0}}
  28.       ]">
  29. </div>
  30. <div id="chart3" dg-chart-widget="..."></div>
  31. <div id="chart4" dg-chart-widget="..."></div>
  33. //当点击chart5图表条目时，
  34. //将图表事件对象数据的"name"属性值设置为chart6图表的第0个数据集的第0个参数值，
  35. //然后刷新chart6图表
  36. <div id="chart5" dg-chart-widget="..." dg-chart-link="myChartLink"></div>
  37. <div id="chart6" dg-chart-widget="..."></div>
  39. //当点击chart7图表条目时，不传递任何参数，直接刷新chart8图表
  40. <div id="chart7" dg-chart-widget="..." dg-chart-link="{target:'chart8'}"></div>
  41. <div id="chart8" dg-chart-widget="..."></div>
  42. </body>

用户应该设置联动目标图表元素的id属性值，系统自动生成的值在每次刷新时都可能是随机的。

图表联动功能的实现原理是：为源图表绑定事件处理函数，将图表事件对象的数据值设置为目标图表数据集的对应参数值，然后刷新图表。

图表事件对象（chartEvent）的详细说明文档请参考图表事件对象章节。