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

Question

我使用 highcharts-vue 包装器 (https://github.com/highcharts/highcharts-vue) 在我的项目中显示图表。现在，我正在向现有数据动态添加新数据。 (最初我相信使用了addPoint函数，但我已经切换到将其推送到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 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);
}
}