2014-02-06 2 views
2

Если, например, у меня есть диаграмма с тремя рядами, а всплывающие подсказки имеют общий доступ, я бы хотел больше контролировать форматирование всплывающих подсказок. В настоящее время я использую formatter: somefunction() и создаю свой собственный html для использования в всплывающей подсказке, которая отображается. Теперь это работает очень хорошо, но теперь я хотел бы знать, когда функция formattor запускает эту последовательность, в которой я закончил, поэтому из трех серий в всплывающей подсказке я могу отформатировать текст, который я показываю соответствующим образом.Highcharts Форматирование всплывающих подсказок для общих подсказок

Shared подсказка:

Заголовок Ярлык

Series 1 
    Series 2 (If I am hovering over this item I want to bold it in the formatter function) 
    Series 3 

ответ

2

Существует не такая информации в общей подсказке - просто вы можете парить пустое пространство на графике (ни один из серии), и он будет отображаться, см: http://jsfiddle.net/LBsL5/

Решение, которое может работать для вас, чтобы отключить общий всплывающую подсказку и получить значения из другой серии с помощью:

var xIndex = this.series.xData.indexOf(this.x), 
    allSeries = this.series.chart.series; 

Теперь перейдите по всей серии и используйте allSeries[index].yData[xIndex], чтобы получить значение от каждой серии.

Конечно, если this.series.index (или this.series.options.index) то же самое index, а затем генерирует полужирный текст.

1

Спасибо за руководство по этому вопросу. Я размещаю полный код здесь, чтобы реализовать это. Надеюсь, это поможет другим.

// Header for tooltip. 
// This row consists of bold text, with the text being the xAxis Label 
// that the Series falls in followed by the Chart Title. 
var toolTip = '<b>' + this.x + ' ' + chartTitle + '</b><br/>'; 

// Get the current index in the Series you are hovering over. 
var xIndex = this.series.xData.indexOf(this.point.x); 

// Get all the Series represented in the Chart. 
var allSeries = this.series.chart.series; 

// Loop over each Series. 
for (var index = 0; index < allSeries.length; index++) { 
    // Get the value from each Series. 
    var yDataValue = allSeries[index].yData[xIndex]; 

    // Check if this is the same as index and if it is then you are 
    // hovering over the point that needs the text in the formatted tooltip in bold for that Series. 
    if (this.series.index === index || this.series.options.index === index) { 
     // 
     // Generate Bold Text here. 
     // 

     toolTip = toolTip + '<b>' + allSeries[index].name + ': ' + yDataValue + '</b>'; 
    } 
    else { 
     toolTip = toolTip + allSeries[index].name + ': ' + yDataValue; 
    } 
} 
Смежные вопросы