highcharts 實現多圖表聯動

最近心血來潮寫了好幾篇關於 highcharts 的文章,那么這次就寫 highcharts 如何進行 多圖表聯動

效果圖：

步驟：
1、設置一個對象 chartRenderObj 用來賦值多個圖實例，以 div 的id為key值
2、從 highcharts 官網中復制多圖標聯動代碼，包裝成一個通用函數 linkChartFun
3、將 多個圖表容器的父元素和圖示例對象傳入

請看具體代碼：

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 = {}
chartRenderObj['chart01'] =  Highcharts.chart('chart01', chartOptions)
chartRenderObj['chart02'] =  Highcharts.chart('chart02', chartOptions)

linkChartFun('.chart-container', chartRenderObj) // 調用圖表聯動函數進行設置

備注: 要顯示圖中的豎線，需要在 xAxis 配置中設置十字准星線crosshair: true

由於效果圖是公司項目的截圖，也是參照了 highcharts 官網示例進行編寫的，所以就不再另外寫示例代碼了，直接附上官網的示例代碼地址：https://jshare.com.cn/temp/YOp6D7

到這里，highcharts 多圖聯動就結束了，歡迎大家評論一起交流！