Hightcharts 在vue中实现多图联动

官网有一个例子关于Highcharts 多图联动，链接地址，但是例子不是在vue中实现的，如何在vue中实现多图联动呢？

下面的是完整的例子

定义2个div

<div id="chart1"></div>
<div id="chart2"></div>

引入Highcharts和jquery ,因为要用到mouseover事件，方便用jquery获取元素

import Highcharts from "highcharts/highcharts";
import $ from "jquery";

methods 里面的函数

    showChart(arr) {
      let chartObj = {};
      for (let i = 0; i < 2; i++) {
        let chartOptions = this.chartOptions;
          chartObj["chart0" + (i + 1)] = Highcharts.chart(
          "chart0" + (i + 1),
          chartOptions
        );
      }

      $(".chart-container").on("mousemove", (e) => {
        var point, event;
        try {
          for (var key in chartObj) {
            if (chartObj[key].pointer) {
              event = chartObj[key].pointer.normalize(e.originalEvent); // Find coordinates within the chartObj[key]
              point = chartObj[key].series[0]
                ? chartObj[key].series[0].searchPoint(event, true)
                : null; // Get the hovered point
              if (point) {
                point.highlight(e);
              }
            }
          }
        } catch (err) {
          console.log(err);
        }
      });
      $(".chart-container").on("mouseout", (e) => {
        var point, event;
        try {
          for (var key in chartObj) {
            chartObj[key].xAxis[0].hideCrosshair(); // 隐藏十字准星线
            chartObj[key].pointer.chart.hoverPoints[0].onMouseOut(); // 去掉鼠标状态
            chartObj[key].tooltip.isHidden = true;
          }
        } catch (err) {
          console.log(err);
        }
      });
      Highcharts.Pointer.prototype.reset = function () {
        return undefined;
      };
      /**
       * 高亮当前的数据点，并设置鼠标滑动状态及绘制十字准星线
       */
      Highcharts.Point.prototype.highlight = function (event) {
        // event.target.onMouseOver(); // 显示鼠标激活标识
        //console.log(event.target);
        this.onMouseOver(); // 显示鼠标激活标识
        //  this.series.chart.tooltip.refresh(this); // 显示提示框
        //  this.series.chart.xAxis[0].drawCrosshair(event, this); // 显示十字准星线
      };
    },

上面已实现联动，如果要加上缩放

        chart: {
          type: "spline",
          marginLeft: 40,
          zoomType: "x",
        },

        xAxis: {
          type: "datetime",
          dateTimeLabelFormats: {
            millisecond: "%H:%M:%S.%L",
            second: "%H:%M:%S",
            minute: "%H:%M",
            hour: "%H:%M",
            day: "%m-%d",
            week: "%m-%d",
            month: "%Y-%m",
            year: "%Y",
          },
          crosshair: true,
          events: {
            setExtremes: this.syncExtremes,
          },
        },

syncExtremes是放在methods中

    // 同步缩放效果，即当一个图表进行了缩放效果，其他图表也进行缩放
    syncExtremes(e) {
      let thisChart = e.target.chart;
      if (e.trigger !== "syncExtremes") {
        Highcharts.each(Highcharts.charts, function (chart) {
          if (chart && chart !== thisChart) {
            if (chart.xAxis && chart.xAxis[0] && chart.xAxis[0].setExtremes) {
              chart.xAxis[0].setExtremes(e.min, e.max, undefined, false, {
                trigger: "syncExtremes",
              });
            }
          }
        });
      }
    },

注意：setExtremes: this.syncExtremes, 要加this

来源：oschina

链接：https://my.oschina.net/u/2612473/blog/4730829

标签

Highcharts

Vue.js

jquery