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

У меня возникли проблемы с моим компонентом твердого калибра, использующим оболочку 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) Любые идеи?

Проверьте пример здесь. Кажется, вам следует использовать point.update() вместо установки новых данных

Phil 10.09.2018 06:03

Привет, Фил! Насколько я могу судить, оболочка highcharts-vue не предоставляет эти методы для использования. ссылка: github.com/highcharts/highcharts-vue#chart-object-reference

ben sladden 10.09.2018 08:05
Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
1
2
390
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Это происходит из-за мутации данных в 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

С уважением!

Другие вопросы по теме