专栏首页前端之攻略Hightcharts 在vue中实现多图联动

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • highcharts 自适应div的宽度

    如果窗口变化时,highcharts图表是自带自适应的,但是切换折叠菜单时,highchats图表并不自适应外层div的宽度。如何实现适应div的宽度?

    tianyawhl
  • .glb格式的模型怎么在three.js中展示

    3D软件中导出的格式一般有.obj 和.glb ,下面是blender 2.8.2 生成模型并在three.js中展示的流程

    tianyawhl
  • threejs 场景切换 优化性能

    是实现2个场景的定时切换,由于是用在大屏系统,需要浏览器一直能正常运行,不能运行一段时间卡死

    tianyawhl
  • KUOKUO的趣味教程 | 小怪物也思考(3)

    张晓衡
  • php数组遍历类与用法示例

    砸漏
  • PHP设计模式之工厂模式(Factory Pattern)的讲解

    面向对象编程中,工厂模式是我们最常用的实例化对象模式,工厂类就是一个专门用来创建其它对象的类,工厂类在多态性编程实践中是非常重要的。它允许动态替换类,修改配置,...

    砸漏
  • 如何理解和使用Python中的列表

    Python有6个序列的内置类型,但最常见的是列表和元组。今天我们就来讲讲列表。

    小土豆Yuki
  • Vue-json-viewer 展示JSON格式数据

    最近在开发一个公司的投放管理系统的操作日志模块,要查看某条操作日志的请求参数,要将请求的参数以JSON格式的形式展示出来,于是用到了vue-json-viewe...

    越陌度阡
  • SAP最佳业务实践:FI–资产会计(162)-26相关报表

    5.2 SAPERP 报表 用法 以下表格列示了您获取业务过程相关信息所能使用的报表。 您可在以下业务流程文档中找到每个报表的详细信息。它们综合提供了所有重要...

    SAP最佳业务实践
  • 集中式播放,给你更好的听歌体验。

    随着音乐正版化的推进,想要在单一的平台听到想听的所有歌曲越来越困难,正版化是好事,但对用户来说,却绝对算不上是方便。虾米音乐、QQ音乐、网易云音乐、豆瓣音乐等等...

    课代表

扫码关注云+社区

领取腾讯云代金券