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，因此没有直接的方法可以使用工具提示模板实现此目的。

然而价值＆＃34; TotalValue＆＃34;来自JSON的JSON可以在以下事件的帮助下显示在工具提示中＆＃34; toolTipInitialize＆＃34;如下面的代码片段所示。

$("#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 }
});

在方法＆＃34; rendertool＆＃34;

function rendertool(sender) { 

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

}

活动的发件人拥有＆＃34;模型＆＃34;图表的属性，您可以在其中获取系列的数据源，因此您可以访问JSON中的任何值。希望这对你有用。

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

Sample

由于

Syncfusion JS图表自定义工具提示

1 个答案: