javascript - Syncfusion JS 图表自定义工具提示

Question

我正在使用 Syncfusion JS 12.1.0.43，尝试使用自定义工具提示实现折线图；

这是我的 HTML；

<div id="div-overview-transaction-tooltip" style="display:none;">
  <div id="div-transaction-tooltip-value">
   <ul>
    <li>#point.totalValue#</li>
    <li>#point.dataSource.totalValue#</li>
    <li>{{:totalValue}}</li>
    <li>#series.dataSource.totalValue#</li>
   </ul>
  </div>
 </div>

这是我的示例 JSON；

{"TotalValue":0,"Percentage":0,"AverageResponseTime":0,"DateTime":"\/Date(1402056000000)\/"}

这是我的 JS；

    $("#container").ejChart({
      primaryXAxis: { labelFormat: "HH:00" },
      primaryYAxis:
      {
        labelFormat: "{value}",
        rangePadding: 'round',
        range: { min: 0, max: 25, interval: 5 },
      },
      commonSeriesOptions: {
        type: 'line', animation: true,
        tooltip: { visible: true, template: 'div-overview-transaction-tooltip' },
        marker: { shape: 'circle', size: { height: 5, width: 5 }, visible: true },
        border: { width: 1 }
      },
      series: [{ name: 'GET', type: 'line', dataSource: { data: getJson, xName: "DateTime", yName: 'TotalValue' } }],
      canResize: true,
      load: "loadTheme",
      size: { height: 300 },
      legend: { visible: true }
    });

输出:

          #point.TotalValue#
          #point.dataSource.TotalValue#
          {{:TotalValue}}
          #series.dataSource.TotalValue#

我想在自定义工具提示上显示来自 JSON 的所有属性。除了工具提示，一切正常。

如有任何帮助，我们将不胜感激。已经谢谢了。

Answer 1

默认情况下，工具提示模板仅支持 point.x 和 point.y，因此无法使用工具提示模板直接实现。

但是，借助以下事件“toolTipInitialize”，可以在工具提示中显示来自 JSON 的值“TotalValue”，如下面的代码片段所示。

$("#container").ejChart({
  primaryXAxis: { labelFormat: "HH:00" },
  primaryYAxis:
  {
    labelFormat: "{value}",
    rangePadding: 'round',
    range: { min: 0, max: 25, interval: 5 },
  },
  commonSeriesOptions: {
    type: 'line', animation: true,
    tooltip: { visible: true, template: 'div-overview-transaction-tooltip' },
    marker: { shape: 'circle', size: { height: 5, width: 5 }, visible: true },
    border: { width: 1 }
  },
  series: [{ name: 'GET', type: 'line', dataSource: { data: getJson, xName: "DateTime", yName: 'TotalValue' } }],
  canResize: true,
  load: "loadTheme",
  size: { height: 300 },
  toolTipInitialize:"rendertool"
  legend: { visible: true }
});

在方法“rendertool”中

function rendertool(sender) { 

sender.Data.currentText = "Total Value:"+sender.model.series[sender.Data.seriesIndex].dataSource.data[sender.Data.pointIndex].TotalValue.toString(); 

}

事件的发送者具有图表的“模型”属性，您可以在其中获取系列的数据源，因此您可以访问 JSON 中的任何值。希望这对你有用。

这是我尝试实现此目的的示例链接。

Sample

谢谢