Question

我使用highcharts-vue包装器（https://github.com/highcharts/highcharts-vue）在我的项目中显示图表。现在，我将新数据动态添加到现有数据中。（最初，我相信使用了addPoint函数，但是我已经切换到将其推入series数组。）

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

在这个高图示例中，这是我非常需要的，除了它不是每隔一段时间自动更新，而是单击一个按钮。 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);
    }
  }

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

1 个答案: