2017-05-27 34 views
0

如果我將滾動條應用於熱圖(通過高位圖),然後滾動數據與x軸標籤重疊。 到目前爲止,heatmap不支持滾動條嗎?如何在highcharts熱圖上使用滾動條?

請更多,更清晰檢查jsfiddle

$(function() { 
    Highcharts.chart('container', { 

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

      plotOptions: { 
       series: { 
        dataLabels: { 
         enabled: true, 
         style: { 
          fontWeight: 'normal' 
         } 
        } 
       } 
      }, 

      title: { 
       text: '' 
      }, 

      xAxis: { 
       categories: ['A', 'B', 'C', 'D', 'E'] 
      }, 

      yAxis: { 
       categories: ['AE', 'AQ', 'DF', 'CV', 'XC', 'FG'], 
       title: null, 
       min: 0, 
       max: 5, 
       scrollbar: { 
       enabled: true 
       } 
      }, 

      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.yAxis.categories[this.point.y] + '</b> has been awarded <b> 
     ' + 
     this.point.value + ' $ 
    </b> in <br><b> ' + this.series.xAxis.categories[this.point.x] + '</b>'; 
       } 
      }, 
      exporting: { enabled: false }, 
      credits: { 
       enabled: false 
      }, 
      series: [{ 
       name: 'Sales per employee', 
       borderWidth: 1, 
       data: [[0, 0, 3432], [0, 1, 32323], [0, 2, 23232], [0, 3, 0], [0, 4, 34064], [0, 5, 324], [0, 6, 33], [1, 0, 8292921], [1, 1, 34234234], [1, 2, 150895], [1, 3, 0], [1, 4, 432432], [1, 5, 312274], [1, 6, 532541], [2, 0, 1253412], [2, 1, 145933], [2, 2, 432423], [2, 3, 0], [2, 4, 2722052], [2, 5, 44284], [2, 6, 34324], [3, 0, 35434257], [3, 1, 0], [3, 2, 267659], [3, 3, 0], [3, 4, 4234320], [3, 5, 342340], [3, 6, 0], [4, 0, 1525929], [4, 1, 34073], [4, 2, 139196], [4, 3, 117], [4, 4, 0], [4, 5, 137038], [4, 6, 61571]], 
       dataLabels: { 
        enabled: true, 
        color: '#000000' 
       } 
      }] 

     }); 
    }); 

回答