尝试使用 highcharts-vue 包装器设置 xAxis 极值

Question

我使用 highcharts-vue 包装器 (https://github.com/highcharts/highcharts-vue) 在我的项目中显示图表。现在我正在动态地将新数据添加到现有数据中。 （本来我相信addPoint这个函数是用的，但是我已经切换到push到series数组了。）

现在，当我向数据添加一个元素时，所选/显示的范围保持不变，但我希望将其设置为锚定在右侧，因此会出现新的推送数据点（无需手动移动所选范围）。

在这个 highcharts 示例中，它是我非常需要的，除了它不是每隔一段时间自动更新，而是在单击按钮时。 https://www.highcharts.com/stock/demo/dynamic-update

我想，我可以通过在 xAxis 上使用 setExtremes 来解决这个问题，但是我收到一个错误，即 xAxis 不存在。类似这个例子。
http://jsfiddle.net/wkBwW/16/

所以我认为这是因为我必须以不同的方式更改值或因为包装版本而以不同的方式调用更新。

<template>
    <div class="chartcard">
      <highcharts :constructor-type="'stockChart'" :options="chartOptions" ></highcharts>
      <button v-on:click="addPoint" key="nextbutton"> add data </button>
    </div>
</template>

<script>
import chartdatajson from "../assets/chart_data.json"
import {Chart} from 'highcharts-vue'
import Highcharts from 'highcharts'
import stockInit from 'highcharts/modules/stock'

stockInit(Highcharts);

let groupingUnits = [['week', [1]], ['month', [1]]];

function getOhlcAndVolume(data) {
...
}
let dataOhlcVolume = getOhlcAndVolume(chartdatajson);


export default {
  name: 'ChartCard',
  props: {
  },
  components: {
    highcharts: Chart 
  },
  methods: {
    rescale: function(){
      this.chartOptions.rangeSelector.selected = 0;
    },
    addPoint: function() {
      let somedata = this.test_add_data.shift();
      let ohls = somedata.slice(0,5);
      let volume = [somedata[0], somedata[5]];
      this.chartOptions.series[0].data.push(ohls);
      this.chartOptions.series[1].data.push(volume);

      // this.chartOptions.xAxis.max = somedata[0]
      this.chartOptions.xAxis[0].setExtremes(1554048000000 , somedata[0])
    },
  },
  data () {
    return {
      test_add_data: [[1556812800000,262,265,260.5,265,30200],[1557072000000,260,260,258,259,33688],[1557158400000,259.5,263,259,262.5,25686]],
      chartOptions: {
        rangeSelector: {
          selected: 0
        },
        title: { text: 'Some Title' },
        yAxis: [{...
        }],
        xAxis: {
        },
        series:
          [{
            type: 'candlestick',
            name: 'AAPL',
            data: dataOhlcVolume.ohlc,
            dataGrouping: {
              units: groupingUnits
            }
          }, {
            type: 'column',
            name: 'Volume',
            data: dataOhlcVolume.volume,
            yAxis: 1,
            dataGrouping: {
              units: groupingUnits
            }
          }]
      }
    }
  }
}
</script>

Answer 1

通过在 vue 应用程序中设置极端值来查看此示例：https://codesandbox.io/s/vue-template-nutgx。如您所见，setExtremes() 方法必须在 chart.xAxis 实例上调用。

您可以按照这种方法获取图表参考：

  data() {
    return {
      chartOptions: {
        chart: {
          events: {
            load: (function(self) {
              return function() {
                self.chart = this; // saving chart reference in the component
              };
            })(this)
          }
        },
        ...
      }
    };
  }

这样你就可以像这样引用xAxis.setExtremes()：

  methods: {
    setNewExtremes: function() {
      this.chart.xAxis[0].setExtremes(1525872600000, 1528291800000);
    }
  }