在多个 Highcharts-Vue 股票图表中同步 x 轴缩放

Question

我正在使用 Highcharts-Vue 并且我有多个 stockChart 图表，我想同步它们的 x 轴缩放。所以，当我放大一个时，所有其他的都在同一个区域放大。

我正在尝试实现here的效果，我也以它为例。但是不是用vue写的。

我的逻辑是遵循代码，在 afterSetExtremes 事件中，我可以调用 vuex 函数来更改图表状态并将 setExtremes 调用到所有其他图表。

我尝试将events 插入到包含数据和选项的对象的xAxis 中以创建图表。但这是在服务器上动态创建的，并作为json 传递给前端，因此afterSetExtremes 函数不起作用。所以，这失败了

然后，在我的前端 vue 中我尝试了这个

<highcharts 
  :constructor-type="'stockChart'" 
  :options="chart" 
  :callback="chartcallback" 
  @change="chartchange" 
  @click="chartclick" 
  v-on:afterSetExtremes="chartextremes" 
  v-on:zoom="chartzoom" >
</highcharts> 

在我的脚本中

import { mapActions } from 'vuex';   
export default {
    name:'VesselCharts',
    props:['chart'], 
    methods:{
      ...mapActions(['zoomed']),    
      chartcallback(){
        console.log('chartcallback CHART LOADED'); 
      },
      chartchange(){
        console.log('CHART changed'); 
      },
      chartclick(){
        console.log('CHART clicked'); 
      },
      chartextremes(){
        console.log('CHART chartextremes'); 
      },
      chartzoom(){
        console.log('CHART chartzoom'); 
      }

    }
}

除了 callback 之外，所有其他功能和事件都不起作用。我没有看到任何console.log。所以，这也失败了。

我是堆栈。

如何捕捉缩放事件及其 xMin xMax，然后调用 chart.xAxis[0].setExtremes(xMin, xMax, true, false); 到所有其他图表？

谢谢

Answer 1

解决方案是使用Highcharts.addEvent 方法并监听xAxis afterSetExtremes 事件（这里使用EventBus 触发Chart 组件中捕获的名为“extremes-changed”的自定义事件）：

export function syncCharts(H) {
  H.addEvent(H.Chart, "load", function(e) {
    var chart = e.target;

    H.addEvent(chart.xAxis[0], "afterSetExtremes", function(e) {
      EventBus.$emit("extremes-changed", {
        min: e.min,
        max: e.max,
        chartId: chart.index
      });
    });
  });
}

请注意，该函数可以保存到单独的文件中，并在创建图表组件时进行初始化。检查下面发布的演示。

演示：

• https://codesandbox.io/s/vue-template-jyp7o

API 参考：

• https://api.highcharts.com/class-reference/Highcharts#.addEvent%3CT%3E