В настоящее время у меня есть диаграмма диаграммы рабочих диаграмм (версия 6.0.3). У меня несколько серий, где я обновляюсь в реальном времени. Я хочу добавить аннотации к точкам, связанным идентификатором, который следует за точкой, когда я добавляю более динамически. Например, я добавляю его к индексу 3, и, добавив еще больше, аннотация перемещается влево с точкой в массиве [3].
В настоящее время проблема заключается в динамическом добавлении аннотаций. Вот как настраиваются параметры диаграммы:
function createTrendTool() {
_trendToolChart = Highcharts.chart('trendToolContainer', {
chart: {
type: 'spline',
zoomType: 'x',
panning: true,
panKey: 'shift'
},
tooltip: {
formatter: function () {
var unit = this.series.userOptions.Unit;
if (unit) { unit = ' ' + unit; }
var s = '<b>' + this.series.name + '</b>';
s += '<br/>' + moment(this.x).format('MMM D YYYY HH:mm:ss') +
'<br/>' + this.y + unit;
return s;
}
},
annotations: [{
labelOptions: {
backgroundColor: 'rgba(255,255,255,0.5)',
verticalAlign: 'top',
y: 15
},
labels:[]
}],
title: {
text: 'Trending Signals'
},
credits: false,
yAxis: {
title: {
text: 'Values'
}
},
xAxis: {
title: {
text: 'Time'
},
type: 'datetime'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
label: {
connectorAllowed: true
}
}
},
responsive: {
rules: [{
condition: {
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});
_trendToolChart.showLoading("Loading...");
}
Настройка диаграммы без каких-либо проблем. При извлечении данных из моего API я хочу динамически добавлять аннотацию, поэтому я беру серию из своей диаграммы, а затем пытаюсь добавить аннотацию к этому:
function addAnnotationToChartPoint(point, annotationText) {
_trendToolChart.addAnnotation({
linkedTo: point.Id,
title: annotationText
});
}
Точка.Id является ориентиром, а аннотацияText - строкой.
Но когда я вызываю функцию, я получаю эту ошибку:
TypeError: _trendToolChart.addAnnotation не является функцией в addAnnotationToChartPoint (.js: 865)
Я вижу аннотации, перечисленные в параметрах и массиве userOptions на диаграмме, но функции там нет. Нужно ли что-то мне сначала настроить?
Ну, самый простой (самый глупый) ответ обычно правильный. Похоже, что мой аннотации js файла не были включены в мой html. Добавлена эта строка, и мне было хорошо:
<script src="../Scripts/HighCharts/highcharts.js"></script>