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 多图联动就结束了，欢迎大家评论一起交流！

highcharts 实现多图表联动

猜你喜欢