nuxt.js - NuxtJS HighCharts 系列数据只更新一次

Question

我目前使用的是 nuxt-highcharts: 1.0.8 和 nuxt: 2.11.0

下面有一个基本系列数据，我希望它使用 setInterval 连续更新。我的更新更多的是添加一根蜡烛，然后那根额外的蜡烛将始终更新。但是第一次添加后，我的图表就不会再变了。

(工作不正常)

<template>
  <div>
    <highstock
      :options="chartOptions"
      :update="['options.title', 'options.series']"
    />
    time: {{ time }}
    <button @click="updateChart">Click Here</button>
  </div>
</template>

<script>
const data = [
  [1318607760000, 421.07, 421.49, 420.7, 421.46],
  [1318607820000, 421.4601, 421.71, 421.36, 421.69],
  [1318607880000, 421.69, 421.94, 421.663, 421.94],
  [1318607940000, 421.94, 422, 421.8241, 422]
];

export default {
  data() {
    return {
      time: 1318607940000,
      open: 421.94,
      high: 422,
      low: 421.8241,
      close: 422,
      chartOptions: {
        credits: { enabled: false },
        chart: {
          pinchType: "xy",
          zoomBySingleTouch: true,
          panning: { enabled: true, type: "xy" }
        },
        title: {
          text: "BTC / USD"
        },
        rangeSelector: {
          buttons: [
            {
              type: "hour",
              count: 1,
              text: "1h"
            },
            {
              type: "hour",
              count: 2,
              text: "2h"
            },
            {
              type: "hour",
              count: 4,
              text: "4h"
            },
            {
              type: "hour",
              count: 6,
              text: "6h"
            },
            {
              type: "hour",
              count: 12,
              text: "12h"
            },
            {
              type: "day",
              count: 1,
              text: "1d"
            }
          ],
          selected: 5,
          inputEnabled: false
        },
        navigator: { enabled: false },
        series: [
          {
            type: "candlestick",
            data,
            tooltip: {
              valueDecimals: 2
            },
            upColor: "#3fbf4a",
            upLineColor: "#3fbf4a",
            color: "#e81010"
            // pointStart: 1631631295000, // need 3 0s on the end from a UNIX timestamp
            // pointInterval: 4000 // The interval between data
          }
        ],
        time: { timezone: "Asia/Singapore" }
      }
    };
  },
  mounted() {
    const _this = this;
    setInterval(function() {
      _this.time += 60000;
      _this.open += 1;
      _this.high += 1;
      _this.low += 1;
      _this.close += 1;
      _this.updateChart([
        _this.time,
        _this.open,
        _this.high,
        _this.low,
        _this.close
      ]);
    }, 5000);
  },
  methods: {
    updateChart(number) {
      this.chartOptions.series = [
        {
          type: "candlestick",
          data: data.concat([number]),
          tooltip: {
            valueDecimals: 2
          },
          upColor: "#3fbf4a",
          upLineColor: "#3fbf4a",
          color: "#e81010"
        }
      ];
    }
  }
};
</script>

我有另一个示例，但它在图表始终更新且数据非常简单的情况下有效。

(工作示例)

<template>
  <div>
    <highstock
      :options="chartOptions"
      :update="['options.title', 'options.series']"
    />
    time: {{ time }}
    <button @click="updateChart">Click Here</button>
  </div>
</template>

<script>
const data = [1, 2, 3, 4];

export default {
  data() {
    return {
      time: 1318607940000,
      open: 421.94,
      high: 422,
      low: 421.8241,
      close: 422,
      chartOptions: {
        credits: { enabled: false },
        chart: {
          pinchType: "xy",
          zoomBySingleTouch: true,
          panning: { enabled: true, type: "xy" }
        },
        title: {
          text: "BTC / USD"
        },
        rangeSelector: {
          buttons: [
            {
              type: "hour",
              count: 1,
              text: "1h"
            },
            {
              type: "hour",
              count: 2,
              text: "2h"
            },
            {
              type: "hour",
              count: 4,
              text: "4h"
            },
            {
              type: "hour",
              count: 6,
              text: "6h"
            },
            {
              type: "hour",
              count: 12,
              text: "12h"
            },
            {
              type: "day",
              count: 1,
              text: "1d"
            }
          ],
          selected: 5,
          inputEnabled: false
        },
        navigator: { enabled: false },
        series: [
          {
            type: "candlestick",
            data,
            tooltip: {
              valueDecimals: 2
            },
            upColor: "#3fbf4a",
            upLineColor: "#3fbf4a",
            color: "#e81010"
          }
        ],
        time: { timezone: "Asia/Singapore" }
      }
    };
  },
  mounted() {
    const _this = this;
    setInterval(function() {
      _this.open += 300;
      _this.updateChart(_this.open);
    }, 3000);
  },
  methods: {
    updateChart(number) {
      this.chartOptions.series = [
        {
          type: "candlestick",
          data: data.concat(number),
          tooltip: {
            valueDecimals: 2
          },
          upColor: "#3fbf4a",
          upLineColor: "#3fbf4a",
          color: "#e81010"
        }
      ];
    }
  }
};
</script>

<style lang="scss" scoped></style>

我的真正目标是在每个时间间隔不断添加蜡烛，但我想先通过这个挑战。但这种做法的最终目标是创建股票市场数据图。我希望你能帮助我，我已经尝试了几个小时

您可以使用我的存储库复制 是:https://github.com/infrastructure-playground/vuejs .请按照以下步骤进行设置，然后访问 localhost:3000/charts :

$ git clone -b feat/highcharts https://github.com/infrastructure-playground/vuejs.git
$ cd vuejs
$ npm install
$ npm run dev

Answer 1

我曾经遇到过同样的问题(实际上也是在处理 highcharts 时)，即更新对象内的数组会导致依赖于该对象的组件出现 react 性问题。

我通过使用 Object.assign() 一次性将所有对象替换为更新后的对象来解决这个问题，而不是更新原始对象的属性。

尝试执行以下操作:

updateChart(number) {
  const updatedSeries = [
    {
      type: "candlestick",
      data: data.concat([number]),
      tooltip: {
        valueDecimals: 2
      },
      upColor: "#3fbf4a",
      upLineColor: "#3fbf4a",
      color: "#e81010"
     }
  ];
  Object.assign(this.chartOptions.series, updatedSeries)
}

我觉得这个answer 也说明了问题本身。