У меня возникли проблемы с моим компонентом твердого калибра, использующим оболочку highcharts-vue. Как правило, каждый раз, когда он получает новые данные, он повторно рисует анимацию с нуля. См., Например, ссылку на песочницу ниже: https://codesandbox.io/s/n0no0jky1l
Желаемое поведение, которого я пытаюсь достичь, показано здесь: https://www.highcharts.com/demo/gauge-solid Когда датчик плавно переходит от старого к новому значению. Насколько я могу судить, не рекомендуется обращаться к методам диаграмм вручную (например, для вызова метода points.update). (источник: https://github.com/highcharts/highcharts-vue#chart-object-reference) Любые идеи?
Привет, Фил! Насколько я могу судить, оболочка highcharts-vue не предоставляет эти методы для использования. ссылка: github.com/highcharts/highcharts-vue#chart-object-reference
Это происходит из-за мутации данных в Highcharts. Пожалуйста, используйте Point.update
вместо обновления всей серии, чтобы анимация работала. Вы можете получить доступ ко всему объекту Chart
по ссылке в вашем компоненте, в частности, this.children[0].chart
. Вот код:
watch: {
title(newValue) {
this.chartOptions.title.text = newValue;
},
points(newValue, oldValue) {
console.info("watch firing", newValue, oldValue);
this.$children[0].chart.series[0].data[0].update(oldValue += 1);
},
units(newValue) {
this.chartOptions.series[0].dataLabels.format =
'<div style = "text-align:center"><span style = "font-size:2rem;color: black">{y}</span><div>' +
newValue +
"</div><div/>";
},
min(newValue) {
this.chartOptions.yAxis.min = newValue;
},
max(newValue) {
this.chartOptions.yAxis.max = newValue;
}
},
Не беспокойтесь о ваших данных, Highcharts видоизменяет их, поэтому ваш реквизит points
должен обновляться каждый раз.
Живой пример:https://codesandbox.io/s/ojkzvo05z
С уважением!
Проверьте пример здесь. Кажется, вам следует использовать
point.update()
вместо установки новых данных