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我的財產的自定義提示。除了工具提示一切正常。

任何幫助將appriciated。謝謝。

Answer 1

默認情況下，工具提示模板僅支持point.x和point.y，因此沒有直接的方法可以使用工具提示模板來實現此目的。

但是，JSON中的「TotalValue」值可以通過下面的代碼片段中的以下事件「toolTipInitialize」在Tool-tip中顯示。

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

感謝