高图x轴类别

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

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

通过将类型设置为heatmap定义热图系列。 像任何cartesian级数一样，热图具有X和Y轴。 但是，点定义采用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>