Question

你可以帮帮我吗？我创建了这个热图表..我在x轴看到一个“7”数字。也许我累了..但问题是什么？（在此之前我没有看到相似的内容）

非常感谢！

$(document).ready(function() {  
   var chart = {      
      type: 'heatmap',
      marginTop: 40,
      marginBottom: 80
   };
   var title = {
      text: 'Sales per employee per weekday'   
   };     

   var xAxis = {
      categories: ['Monday','Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
   };
   
   var yAxis = {
      categories: ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24'],
      title: null
   };
   
   var colorAxis = {
      min: 0,
      minColor: '#FFFFFF',
      maxColor: Highcharts.getOptions().colors[0]
   };

   var legend = {
      align: 'right',
      layout: 'vertical',
      margin: 0,
      verticalAlign: 'top',
      y: 25,
      symbolHeight: 280
   };

   var 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>';
      }
   };

   var series= [{
      name: 'Sales per employee',
      borderWidth: 1,
      data: [[1,0,1],[1,1,1],[1,2,1],[1,3,1],[1,4,1],[1,5,1],[1,6,1],[1,7,1],[1,8,1],[1,9,1],[1,10,1],[1,11,1],[1,12,1],[1,13,1],[1,14,1],[1,15,1],[1,16,1],[1,17,1],[1,18,1],[1,19,1],[1,20,1],[1,21,1],[1,22,1],[2,0,1],[2,1,1],[2,2,1],[2,3,1],[2,4,1],[2,5,1],[2,6,1],[2,7,1],[2,8,1],[2,9,1],[2,10,1],[2,11,1],[2,12,1],[2,13,1],[2,14,1],[2,15,1],[2,16,1],[2,17,11],[2,18,1],[2,19,1],[2,20,1],[2,21,1],[2,22,1],[3,0,1],[3,1,1],[3,2,1],[3,3,1],[3,4,1],[3,5,1],[3,6,1],[3,7,1],[3,8,1],[3,9,1],[3,10,1],[3,11,1],[3,12,1],[3,13,1],[3,14,1],[3,15,1],[3,16,1],[3,17,1],[3,18,1],[3,19,1],[3,20,1],[3,21,1],[3,22,1],[4,0,1],[4,1,1],[4,2,1],[4,3,1],[4,4,1],[4,5,1],[4,6,1],[4,7,1],[4,8,1],[4,9,1],[4,10,21],[4,11,1],[4,12,15],[4,13,1],[4,14,1],[4,15,1],[4,16,1],[4,17,1],[4,18,1],[4,19,1],[4,20,1],[4,21,1],[4,22,1],[5,0,1],[5,1,1],[5,2,1],[5,3,1],[5,4,1],[5,5,1],[5,6,1],[5,7,1],[5,8,1],[5,9,1],[5,10,31],[5,11,1],[5,12,1],[5,13,1],[5,14,1],[5,15,1],[5,16,1],[5,17,1],[5,18,1],[5,19,1],[5,20,1],[5,21,1],[5,22,1],[6,0,1],[6,1,1],[6,2,1],[6,3,1],[6,4,1],[6,5,1],[6,6,1],[6,7,1],[6,8,1],[6,9,1],[6,10,1],[6,11,1],[6,12,1],[6,13,1],[6,14,1],[6,15,1],[6,16,1],[6,17,1],[6,18,1],[6,19,1],[6,20,1],[6,21,1],[6,22,1],[7,0,1],[7,1,1],[7,2,1],[7,3,1],[7,4,1],[7,5,1],[7,6,1],[7,7,1],[7,8,1],[7,9,1],[7,10,1],[7,11,1],[7,12,1],[7,13,1],[7,14,1],[7,15,1],[7,16,1],[7,17,1],[7,18,1],[7,19,1],[7,20,1],[7,21,1],[7,22,1]],
      dataLabels: {
         enabled: true,
         color: '#000000'
      }
   }];     
      
   var json = {};   
   json.chart = chart; 
   json.title = title;       
   json.xAxis = xAxis; 
   json.yAxis = yAxis; 
   json.colorAxis = colorAxis; 
   json.legend = legend; 
   json.tooltip = tooltip; 
   json.series = series;       
   
   $('#container').highcharts(json);
});

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
   <script src="https://code.highcharts.com/highcharts.js"></script>    
   <script src="https://code.highcharts.com/highcharts-more.js"></script>    
   <script src="https://code.highcharts.com/modules/heatmap.js"></script> 
<div id="container" style="width: 550px; height: 500px; margin: 0 auto"></div>

你可以帮帮我吗？我创建了这个热图表..我看到x轴的数字为“7”。也许我累了..但问题是什么？（在此之前我没有看到相似的内容）

非常感谢！

Answer 1

抱歉，我在X轴上使用1-7范围，因此出现问题。不是0 ..抱歉这篇文章。解决。

Answer 2

解决方案是使用indexes中的0-6。

通过将类型设置为heatmap来定义热图系列。热图的X和Y轴与任何cartesian系列一样。但是，点定义采用三个值x，y以及value。

$(document).ready(function() {  
   var chart = {      
      type: 'heatmap',
      marginTop: 40,
      marginBottom: 80
   };
   var title = {
      text: 'Sales per employee per weekday'   
   };     

   var xAxis = {
      categories: ['Monday','Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
   };
   
   var yAxis = {
      categories: ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24'],
      title: null
   };
   
   var colorAxis = {
      min: 0,
      minColor: '#FFFFFF',
      maxColor: Highcharts.getOptions().colors[0]
   };

   var legend = {
      align: 'right',
      layout: 'vertical',
      margin: 0,
      verticalAlign: 'top',
      y: 25,
      symbolHeight: 280
   };

   var 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>';
      }
   };

   var series= [{
      name: 'Sales per employee',
      borderWidth: 1,
      data: [[0,0,1],[0,1,1],[0,2,1],[0,3,1],[0,4,1],[0,5,1],[0,6,1],[0,7,1],[0,8,1],[0,9,1],[0,10,1],[0,11,1],[0,12,1],[0,13,1],[0,14,1],[0,15,1],[0,16,1],[0,17,1],[0,18,1],[0,19,1],[0,20,1],[0,21,1],[0,22,1],[1,0,1],[1,1,1],[1,2,1],[1,3,1],[1,4,1],[1,5,1],[1,6,1],[1,7,1],[1,8,1],[1,9,1],[1,10,1],[1,11,1],[1,12,1],[1,13,1],[1,14,1],[1,15,1],[1,16,1],[1,17,1],[1,18,1],[1,19,1],[1,20,1],[1,21,1],[1,22,1],[2,0,1],[2,1,1],[2,2,1],[2,3,1],[2,4,1],[2,5,1],[2,6,1],[2,7,1],[2,8,1],[2,9,1],[2,10,1],[2,11,1],[2,12,1],[2,13,1],[2,14,1],[2,15,1],[2,16,1],[2,17,11],[2,18,1],[2,19,1],[2,20,1],[2,21,1],[2,22,1],[3,0,1],[3,1,1],[3,2,1],[3,3,1],[3,4,1],[3,5,1],[3,6,1],[3,7,1],[3,8,1],[3,9,1],[3,10,1],[3,11,1],[3,12,1],[3,13,1],[3,14,1],[3,15,1],[3,16,1],[3,17,1],[3,18,1],[3,19,1],[3,20,1],[3,21,1],[3,22,1],[4,0,1],[4,1,1],[4,2,1],[4,3,1],[4,4,1],[4,5,1],[4,6,1],[4,7,1],[4,8,1],[4,9,1],[4,10,21],[4,11,1],[4,12,15],[4,13,1],[4,14,1],[4,15,1],[4,16,1],[4,17,1],[4,18,1],[4,19,1],[4,20,1],[4,21,1],[4,22,1],[5,0,1],[5,1,1],[5,2,1],[5,3,1],[5,4,1],[5,5,1],[5,6,1],[5,7,1],[5,8,1],[5,9,1],[5,10,31],[5,11,1],[5,12,1],[5,13,1],[5,14,1],[5,15,1],[5,16,1],[5,17,1],[5,18,1],[5,19,1],[5,20,1],[5,21,1],[5,22,1],[6,0,1],[6,1,1],[6,2,1],[6,3,1],[6,4,1],[6,5,1],[6,6,1],[6,7,1],[6,8,1],[6,9,1],[6,10,1],[6,11,1],[6,12,1],[6,13,1],[6,14,1],[6,15,1],[6,16,1],[6,17,1],[6,18,1],[6,19,1],[6,20,1],[6,21,1],[6,22,1]],
      dataLabels: {
         enabled: true,
         color: '#000000'
      }
   }];     
      
   var json = {};   
   json.chart = chart; 
   json.title = title;       
   json.xAxis = xAxis; 
   json.yAxis = yAxis; 
   json.colorAxis = colorAxis; 
   json.legend = legend; 
   json.tooltip = tooltip; 
   json.series = series;       
   
   $('#container').highcharts(json);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
   <script src="https://code.highcharts.com/highcharts.js"></script>    
   <script src="https://code.highcharts.com/highcharts-more.js"></script>    
   <script src="https://code.highcharts.com/modules/heatmap.js"></script> 
<div id="container" style="width: 550px; height: 500px; margin: 0 auto"></div>

Highcharts x轴类别

2 个答案: