highcharts 实现多图表联动

最近心血来潮写了好几篇关于 highcharts 的文章,那么这次就写 highcharts 如何进行 多图表联动

效果图:

步骤:
1、设置一个对象 chartRenderObj 用来赋值多个图实例,以 div 的id为key值
2、从 highcharts 官网中复制多图标联动代码,包装成一个通用函数 linkChartFun
3、将 多个图表容器的父元素和图示例对象传入

请看具体代码:

html代码:


<\\!-- 以下 html 中的标签是为了不要被浏览器所解析,用的时候去掉多余的 \\ 就好 -->
<\\div class=\"chart-container\">
  // 图表渲染容器
  <\\div id=\"chart01\"><\\/div>
  <\\div id=\"chart02\"><\\/div>
<\\/div>

官网图表联动代码:(包装成一个通用函数 linkChartFun)


/**
 * 为了让多个图表的提示框即十字准星线能够联动,这里绑定多个图表的附件 dom 的鼠标事件进行联动
 * @param {String} seleClass 多个图表容器父元素
 * @param {Object} chartObj 图表对象
 */
export default function linkChartFun(seleClass, chartObj) {
  if($.isEmptyObject(chartObj)) {
    $(seleClass).bind(\'mousemove touchmove touchstart\', function (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)
      }
    })
  }
}

/**
 * 高亮当前的数据点,并设置鼠标滑动状态及绘制十字准星线
 */
Highcharts.Point.prototype.highlight = function (event) {
  this.onMouseOver() // 显示鼠标激活标识
}

图表对象实例化:


// 采用 highcharts 的 chart 方法绘制图像,传入 render 容器和 图表配置
let chartRenderObj[\'chart01\'] =  Highcharts.chart(\'chart01\', chartOptions)
let chartRenderObj[\'chart02\'] =  Highcharts.chart(\'chart02\', chartOptions)

linkChartFun(\'.chart-container\', chartRenderObj) // 调用图表联动函数进行设置

备注: 要显示图中的竖线,需要在 xAxis 配置中设置十字准星线crosshair: true

到这里,highcharts 多图联动就结束了,欢迎大家评论一起交流!

人已赞赏
随笔日记

21.翻译系列:Entity Framework 6 Power Tools【EF 6 Code-First系列】

2020-11-9 4:22:41

随笔日记

程序员修神之路--问世间异步为何物?

2020-11-9 4:22:43

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索