Highcharts передают несколько значений во всплывающую подсказку
Мне нужно отобразить 3 значения во всплывающей подсказке:
время, значение и другое значение (изменение).
Я видел этот пример (но jsdfiddle не работает).
Я пробовал это
//each loop..
indice.push(["time", "value1", "value2"]);
настройки всплывающей подсказки
tooltip:
{
useHTML: true,
formatter: function()
{
return '' + Highcharts.dateFormat('%H:%M:%S', this.x) +'; '+ this.y + this.z(<-is this right?);
}
},
и ряд
series:
[{
type: 'area',
data: indice
}]
может помочь помощь?
thsnks.
Ответы
Ответ 1
Если вы хотите передать дополнительные данные для точки, отличной от значений x и y, вы должны указать это значение. В следующем примере я добавляю следующие три дополнительных значения к каждой точке данных:
{
y: 3,
locked: 1,
unlocked: 1,
potential: 1,
}
Затем для доступа и отображения этих значений в подсказке я использую следующее:
tooltip:
{
formatter: function() { return ' ' +
'Locked: ' + this.point.locked + '<br />' +
'Unlocked: ' + this.point.unlocked + '<br />' +
'Potential: ' + this.point.potential;
}
}
Ответ 2
Если вы в диаграмме Highstocks для нескольких серий хотите отображать серию конкретных данных в подсказке, вы можете сделать что-то вроде этого.
var series = [];
// Populate our series
series.push({
name: "small_cities",
displayName: "Small Cities",
color: "#123456",
data: [...]
});
series.push({
name: "Countries",
displayName: "Countries",
color: "#987654",
data: [...]
});
chart: {
...
tooltip: {
formatter: function() {
var s = '';
$.each(this.points, function(i, point) {
s += '<br /><span style="color:' + this.series.color + '">' +
point.series.userOptions.displayName + '</span>: ' + point.y;
});
return s;
}
},
...
}
Теперь вы увидите красивые названия серий "Маленькие города" вместо имени series.name(small_cities). Все атрибуты, установленные в серии, можно найти в this.points[].series.userOptions
.
Для получения дополнительных параметров форматирования взгляните на Документы высокого уровня.
Ответ 3
Я понял это,
Я передаю 3 значения в массиве данных
indice.push([(new Date(value.x)).getTime(), val_change[0], val_change[1]]);
Серия: [{ тип: 'area', name: titleindice, данные: индекс, showInLegend: false//отключить значок show/hide }]
и в подсказке
tooltip:
{
useHTML: true,
formatter: function()
{
var color = "";
return Highcharts.dateFormat('%H:%M:%S', this.x) + this.y + this.point.config[2] ;
}
},
Ответ 4
двумя способами.
1
series: [
{ ...
tooltip:
{pointFormat: "<span style=\"color:{series.color}\">{series.name}</span>: <b>{point.y} {y2}</b><br/>"}
}, ...
]
o = Highcharts.Point.prototype.tooltipFormatter
Highcharts.Point.prototype.tooltipFormatter=function(format){return o.call(this, format).replace("{y2}", this.config[2]);}
2
a = new Highcharts.StockChart(options);
a.series[0].tooltipFormatter = function(item) { return "<span style=\"color:{" + item.series.color+"\">" +item.series.name+"</span>: <b>"+item.y+item.point.config[2]+"</b><br/>"; }
Ответ 5
То, что я пробовал, - это объединение имени серии с положением оси x и y-оси, и это отлично работает для меня. С какими проблемами вы столкнулись?
tooltip: { formatter: function () { return this.x + ': ' + this.series.name + ': ' + this.y; } }