Wie vertikale Bildlaufleiste in highstock für Heatmap Diagramm

Für die Heatmap-Chart bekommen ich horizontale Scrollbar bekommen konnte, jetzt brauche ich vertikale Bildlaufleiste, ähnlich das Diagramm in dem unten stehenden LinkWie vertikale Bildlaufleiste in highstock für Heatmap Diagramm

http://jsfiddle.net/fj6d2/3076/

Below meine gezeigt Beispielcode:

<html> 
<head> 
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.js"></script> 
<script type="text/javascript" src="http://code.highcharts.com/stock/highstock.js"></script> 
<script src="https://code.highcharts.com/modules/heatmap.js"></script> 
<script src="https://code.highcharts.com/modules/exporting.js"></script> 
</head> 
<body> 

<div id="container" style="height: 300px"></div> 
<script> 


$(function() { 

    $('#container').highcharts({ 

     chart: { 
      type: 'heatmap', 
      marginTop: 40, 
      marginBottom: 40 
     }, 


     title: { 
      text: 'Sales per employee per weekday' 
     }, 

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

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


     }, 
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: 320 
     }, 

     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: 'black', 
       style: { 
        textShadow: 'none' 
       } 
      } 
     }] 

    }); 
}); 
</script> 
</body> 
<html>

Quelle

2017-07-19 user1375592

var chart = new Highcharts.Chart({ 

    chart: { 
     type: 'heatmap', 
     marginTop: 40, 
     marginBottom: 40, 
     renderTo: 'container', 
     zoomType: 'xy' 
    }, 


    title: { 
     text: 'Sales per employee per weekday' 
    }, 

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

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


    }, 
    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: 320 
    }, 

    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: 'black', 
      style: { 
       textShadow: 'none' 
      } 
     } 
    }] 

});

Nehmen Scroll-Eigenschaft true in yaxis scrollbar: {enabled: true} und fügen zoomType: 'xy' in Diagrammobjekt.

Hoffe es hilft Ihnen!

Quelle

2017-07-19 16:38:06 Saurabh

Sie sind super Saurabh. Das hat für mich funktioniert. Wir müssen auch ein Min-Attribut zur Y-Achse hinzufügen. etwas wie das min: 5. – user1375592

Wie vertikale Bildlaufleiste in highstock für Heatmap Diagramm

Antwort

Verwandte Themen