2017-04-13 81 views
0

比方說,我們有兩個高圖 - 熱圖(未來可能會更多)。像下面的jsfiddle一樣檢查它。Highcharts - 同步熱圖

http://jsfiddle.net/xzq5bzy5/1/

<div id="container" style="height: 400px; min-width: 310px; max-width: 800px; margin: 0 auto"></div>  
<div id="container2" style="height: 400px; min-width: 310px; max-width: 800px; margin: 0 auto"></div> 

我想如果我懸停在第一高圖表第一個單元格。它應該同時懸停第二個高圖第一個單元格,並且都應該在各自的工具提示中顯示數據。

我試圖搜索,但我沒有找到任何東西。讓我知道是否需要添加更多信息。

+2

我推薦一下http://www.highcharts.com/demo/synchronized -charts –

+0

我無法找到任何特定於熱圖的東西 –

回答

1

下面是使用同步,圖表highchars演示一個基本的例子:

/* 
    The purpose of this demo is to demonstrate how multiple charts on the same page can be linked 
    through DOM and Highcharts events and API methods. It takes a standard Highcharts config with a 
    small variation for each data set, and a mouse/touch event handler to bind the charts together. 
    */ 



    /** 
    * In order to synchronize tooltips and crosshairs, override the 
    * built-in events with handlers defined on the parent element. 
    */ 
    $('#container').bind('mousemove touchmove touchstart', function(e) { 
     var chart, 
     point, 
     i, 
     event; 

     for (i = 0; i < Highcharts.charts.length; i = i + 1) { 
     chart = Highcharts.charts[i]; 
     event = chart.pointer.normalize(e.originalEvent); // Find coordinates within the chart 
     point = chart.series[0].searchPoint(event, true); // Get the hovered point 

     if (point) { 
      point.highlight(e); 
     } 
     } 
    }); 
    /** 
    * Override the reset function, we don't need to hide the tooltips and crosshairs. 
    */ 
    Highcharts.Pointer.prototype.reset = function() { 
     return undefined; 
    }; 

    /** 
    * Highlight a point by showing tooltip, setting hover state and draw crosshair 
    */ 
    Highcharts.Point.prototype.highlight = function(event) { 
     this.onMouseOver(); // Show the hover marker 
     this.series.chart.tooltip.refresh(this); // Show the tooltip 
     this.series.chart.xAxis[0].drawCrosshair(event, this); // Show the crosshair 
    }; 

    for (var i = 0; i < 2; ++i) { 
     $('<div class="chart">') 
     .appendTo('#container') 
     .highcharts({ 

      chart: { 
      type: 'heatmap', 
      marginTop: 40, 
      marginBottom: 80, 
      plotBorderWidth: 1 
      }, 


      title: { 
      text: 'Sales for Feb' 
      }, 

      xAxis: { 
      categories: ['Alexander', 'Marie', 'Maximilian', 'Sophia', 'Lukas', 'Maria', 'Leon', 'Anna', 'Tim', 'Laura'] 
      }, 

      yAxis: { 
      categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'], 
      title: null 
      }, 

      colorAxis: { 
      min: 0, 
      minColor: '#FFFFFF', 
      maxColor: Highcharts.getOptions().colors[0] 
      }, 

      legend: { 
      align: 'right', 
      layout: 'vertical', 
      margin: 0, 
      verticalAlign: 'top', 
      y: 25, 
      symbolHeight: 280 
      }, 

      tooltip: { 
      formatter: function() { 
       return '<b>' + this.series.xAxis.categories[this.point.x] + '</b> sold <br><b>' + 
       this.point.value + '</b> items on <br><b>' + this.series.yAxis.categories[this.point.y] + '</b>'; 
      } 
      }, 

      series: [{ 
      name: 'Sales per employee', 
      borderWidth: 1, 
      data: [ 
       [0, 0, 10], 
       [0, 1, 19], 
       [0, 2, 8], 
       [0, 3, 24], 
       [0, 4, 67], 
       [1, 0, 92], 
       [1, 1, 58], 
       [1, 2, 78], 
       [1, 3, 117], 
       [1, 4, 48], 
       [2, 0, 35], 
       [2, 1, 15], 
       [2, 2, 123], 
       [2, 3, 64], 
       [2, 4, 52], 
       [3, 0, 72], 
       [3, 1, 132], 
       [3, 2, 114], 
       [3, 3, 19], 
       [3, 4, 16], 
       [4, 0, 38], 
       [4, 1, 5], 
       [4, 2, 8], 
       [4, 3, 117], 
       [4, 4, 115], 
       [5, 0, 88], 
       [5, 1, 32], 
       [5, 2, 12], 
       [5, 3, 6], 
       [5, 4, 120], 
       [6, 0, 13], 
       [6, 1, 44], 
       [6, 2, 88], 
       [6, 3, 98], 
       [6, 4, 96], 
       [7, 0, 31], 
       [7, 1, 1], 
       [7, 2, 82], 
       [7, 3, 32], 
       [7, 4, 30], 
       [8, 0, 85], 
       [8, 1, 97], 
       [8, 2, 123], 
       [8, 3, 64], 
       [8, 4, 84], 
       [9, 0, 47], 
       [9, 1, 114], 
       [9, 2, 31], 
       [9, 3, 48], 
       [9, 4, 91] 
      ], 
      dataLabels: { 
       enabled: true, 
       color: '#000000' 
      } 
      }] 
     }) 
    } 

活生生的例子: http://jsfiddle.net/atkf70cv/