#javascript #angular #highcharts
#javascript #angular #highcharts
Вопрос:
Я использую angular6 и оболочку office highcharts angular (https://github.com/highcharts/highcharts-angular ) в версии 2.4.0.
Все работает хорошо, за исключением меток, которые можно разместить на графике вручную.
Мне просто не удается их обновить. У меня есть график, который можно отфильтровать через серверную часть. Когда я получаю новые сгенерированные данные, я обновляю данные в своих chartOptions, которые используются в html как [options]="chartOptions" для компонента angular.
chartOptions создаются из моего класса по умолчанию следующим образом: this.chartOptions = new GraphConfigSeqAtteptedVsAchived().chartOptions;
Класс выглядит следующим образом: `импортировать * как Highcharts из ‘highcharts’;
класс экспорта graphconfigseqattepteptedvsachived{ варианты общедоступных диаграмм: любые;
constructor(){
this.chartOptions = {
chart: {
height: 600,
width: 620,
events:{load: function(){
this.myTooltip = new Highcharts.Tooltip(this, this.options.tooltip);
}
},
backgroundColor: 'transparent',
},
credits: {
text: 'charname',
href: ''
},
labels: {
},
exporting:{
chartOptions:{
title: {
text:'not set',
style:{
color: '#000000'
},
margin: 0
}
}
},
tooltip: {
enabled: false
},
xAxis: {
min: -10,
max: 0,
width: 535,
title: {
text: 'Rainfall (mm)',
style: {
fontWeight: "bold",
color: '#000000'
}
},
reversed: true,
tickInterval: 1
},
yAxis: {
min: -10,
max: 0,
title: {
text: 'Rainfall (mm)',
style: {
fontWeight: "bold",
color: '#000000'
}
},
reversed: true,
tickInterval: 1
},
title: {
text: ' as',
margin: 0,
style:{
color: 'transparent'
}
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 100,
y: 90,
floating: true,
backgroundColor: '#FFFFFF',
borderWidth: 1,
navigation: {
enabled: false
}
},
plotOptions: {
scatter: {
stickyTracking: false,
allowPointSelect: true,
marker: {
radius: 3,
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '',
hideDelay: 500
},
symbol: "circle",
events: {
mouseOut: function() {
this.chart.myTooltip.hide();
this.chart.myTooltip.options.enabled = false;
},
mouseOver: function() {
if(this.halo) {
this.halo.attr({
'class': 'highcharts-tracker'
}).toFront();
}
},
click: function(event) {
this.chart.myTooltip.options.enabled = true;
this.chart.myTooltip.refresh(event.point, event);
}
}
},
line:{
events: {
legendItemClick: function () {
return false;
}
}
},
series:{
allowPointSelect: true
}
},
series: [{
type: 'line',
data: [[30, 30], [-30, -30]],
marker: {
enabled: false
},
states: {
hover: {
lineWidth: 1
}
},
showInLegend: false,
color: "rgba(0, 0, 0, 0.6)",
enableMouseTracking: false
},{
type: 'line',
data: [[30, 29.5], [-29.5, -30]],
marker: {
enabled: false
},
states: {
hover: {
lineWidth: 0
}
},
showInLegend: false,
dashStyle: 'ShortDash',
color: "rgba(125, 162, 159, 0.35)",
enableMouseTracking: false
},{
type: 'line',
data: [[29.5, 30], [-30, -29.5]],
marker: {
enabled: false
},
states: {
hover: {
lineWidth: 0
}
},
showInLegend: false,
dashStyle: 'ShortDash',
color: "rgba(125, 162, 159, 0.35)",
enableMouseTracking: false
},{
type: 'line',
data: [[29, 30], [-30, -29]],
marker: {
enabled: false
},
states: {
hover: {
lineWidth: 0
}
},
showInLegend: false,
dashStyle: 'ShortDash',
color: "rgba(197, 144, 161, 0.35)",
enableMouseTracking: false
},{
type: 'line',
data: [[30, 29], [-29, -30]],
marker: {
enabled: false
},
states: {
hover: {
lineWidth: 0
}
},
showInLegend: false,
dashStyle: 'ShortDash',
color: "rgba(197, 144, 161, 0.35)",
enableMouseTracking: false
}]
}
}
}`
Сгенерированные данные добавляются в typescript динамически, и все это работает просто отлично. Все обновляется после того, как я установил updateFlag для [(update)]="updateGraph" . Названия осей также в порядке.
Единственное, что для меня не обновляется, — это метки, которые я динамически добавлял к диаграмме следующим образом: let labelTotalNumberOfEyes = {
html : this.translate.instant('GRAPHS.TOTAL_NUMBER_OF_EYES') ': ' (scatterSeries.data.length scatterSeriesRetreatment.data.length),
style : {
left : '330px',
top : '368px',
fontSize : '14px',
backgroundColor: '#FFFFFF',
borderWidth: 1,
}
}
this.chartOptions.labels.items.push(labelTotalNumberOfEyes);
У кого-нибудь есть идеи, что я могу делать неправильно? Я не вижу никакой дополнительной опции, кроме как просто установить этот флаг обновления, и он отлично работает для всего, кроме меток.
Пожалуйста, дайте мне знать, если вам не хватает какой-либо информации.
Заранее спасибо.
Комментарии:
1.
chart.redraw()?2. К сожалению, у угловой оболочки нет такой опции. Они внедрили для этого флаг обновления, но, похоже, это работает только для серии и оси. Таким образом, chart.redraw() не является опцией в этой настройке.
3. Не могли бы вы как-нибудь воспроизвести это в онлайн-редакторе кода, таком как codesandbox или stackblitz? Вы можете использовать эту демонстрацию в качестве шаблона: codesandbox.io/s/543l0p0qq4 .
4. Спасибо за хорошо подготовленный шаблон @WojciechChmiel. Я адаптировал шаблон и просто добавил одну метку и отредактировал текст в функции обновления символа. Вы можете видеть, что метка не изменена, но все остальное. Это именно та проблема, с которой сталкиваюсь и я. Вот моя измененная версия codesandbox.io/s/l22jr69wjq
Ответ №1:
На самом деле эта проблема является ошибкой Highcharts. Я сообщил об этом здесь:https://github.com/highcharts/highcharts/issues/10429.
В качестве обходного пути вы можете использовать Highcharts.SVGRenderer добавление пользовательской метки и сохранение ссылки на нее в вашем компоненте. Далее, при обновлении, вызовите attr() метод для метки (Highcharts.SVGElement) и установите новые параметры. Проверьте демонстрацию и код, размещенные ниже.
Добавьте метку при обратном вызове диаграммы:
constructor() {
const self = this;
this.chartCallback = chart => {
self.chart = chart;
self.label = chart.renderer
.text("test", 100, 100)
.css({
fill: "#555",
fontSize: 16
})
.add()
.toFront();
};
}
вызовите attr() для метки во время обновления:
update_chart() {
const self = this,
chart = this.chart;
chart.showLoading();
setTimeout(() => {
chart.hideLoading();
self.chartOptions.series = [
{
data: [10, 25, 15],
name: "updatedSerieName"
}
];
self.chartOptions.yAxis.title.text = "updatedData";
self.label
.attr({
text: "test1",
x: 150,
y: 120
})
.css({
fill: "red",
fontSize: 20
});
self.updateFromInput = true;
}, 2000);
}
ДЕМОНСТРАЦИЯ:
Ссылка на API:
Комментарии:
1. Большое вам спасибо @WojciechChmiel. Я попробую это на этой неделе и дам вам знать, сработало ли это для моей цели.
2. ваше предложение сработало нормально, но, в конце концов, я переключился на новые аннотации Highcharts, как указано в вашем сообщении об ошибке: github.com/highcharts/highcharts/issues/10429