Попытка установить крайности xAxis, используя оболочку highcharts-vue

Question

Я использую оболочку highcharts-vue (https://github.com/highcharts/highcharts-vue) для отображения диаграммы в моем проекте. Теперь я динамически добавляю новые данные к уже существующим данным. (Изначально я считаю, что используется функция addPoint, но я уже переключился на передачу его в массив series.)

Теперь, когда я добавляю еще один элемент к данным, выбранный / отображаемый диапазон остается прежним, но я хочу установить его привязанным вправо, поэтому появляется новая заданная точка данных (без необходимости сдвигать выбранный диапазон вручную).

В этом примере с высокими диаграммами это очень то, что мне нужно, за исключением того, что оно не обновляется автоматически с интервалом, а при нажатииbutton. https://www.highcharts.com/stock/demo/dynamic-update

Я думал, что мог бы обойти это, используя setExtremes на xAxis, но я получаю сообщение об ошибке, что 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 app: 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);
    }
  }