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

亲切的问候！

接收新数据（点值）时刷新量规

1 个答案: