Пользовательская всплывающая подсказка Syncfusion JS Chart

Я использую 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 в настраиваемой всплывающей подсказке. За исключением всплывающей подсказки, все работает нормально.

Любая помощь будет принята. Уже спасибо.


javascript json syncfusion tooltip
person burakakkor    schedule 06.06.2014    source источник

Ответы (1)


arrow_upward
2
arrow_downward

По умолчанию шаблон всплывающей подсказки поддерживает только точки point.x и point.y, поэтому прямого способа добиться этого с помощью шаблона всплывающей подсказки нет.

Однако значение «TotalValue» из JSON может быть показано во всплывающей подсказке с помощью следующего события «toolTipInitialize», как показано во фрагменте кода ниже.

$("#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. Надеюсь, что это работает для вас.

вот пример ссылки, которую я пытался добиться.

Образец

Спасибо

person MICHAEL PRABHU    schedule 11.06.2014