Твердое обновление датчика при получении новых данных (значение балла)

Question

У меня проблемы с твердотельным компонентом, использующим упаковку highcharts-vue. В основном каждый раз, когда он получает новые данные, он перерисовывает анимацию с 0. Пожалуйста, смотрите ссылку в песочнице ниже, например: https://codesandbox.io/s/n0no0jky1l

Здесь показано желаемое поведение, которого я пытаюсь достичь: https://www.highcharts.com/demo/gauge-solid Где датчик оживляет от старого до нового значения плавно. Из того, что я могу сказать, не рекомендуется обращаться к методам диаграмм вручную (например, для вызова метода points.update). (источник: https://github.com/highcharts/highcharts-vue#chart-object-reference) Есть идеи?

Answer 1

Это происходит из-за мутации данных в Highcharts. Пожалуйста, используйте Point.update вместо обновления всей серии, чтобы анимация работала. Вы можете получить доступ к целому Chart объекту по ссылке в вашем компоненте, в частности, this.children[0].chart. Вот код:

  watch: {
    title(newValue) {
      this.chartOptions.title.text = newValue;
    },
    points(newValue, oldValue) {
      console.log("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

С уважением!