Highcharts 在绿色范围内生成正数，在红色范围内生成负数

Question

我在一个容器中有多个热图。 我想设置颜色轴，使正数落在绿色范围内，负数在红色范围内。 所以我将colorAxis: minColor设置为#009933并将colorAxis: maxColor为#ff3300 。 这并不是将所有负片设置为红色范围，将正片设置为红色范围。 我可以使用 Highcharts 做到这一点吗？

这是我的代码：

 function getPointCategoryName(point, dimension) { var series = point.series, isY = dimension === 'y', axis = series[isY? 'yAxis': 'xAxis']; return axis.categories[point[isY? 'y': 'x']]; } Highcharts.chart('container', { chart: { type: 'heatmap', }, xAxis: { categories: ['val1', 'val2', 'val3',] }, yAxis: [{ title: { text: 'iPhone'}, height: '50%', lineWidth: 2, categories: ['google', 'bing', 'bing',] }, { title: { text: 'iPad'}, height: '50%', top: '50%', offset: 0, lineWidth: 2, categories: ['google', 'bing', 'bing',] }], accessibility: { point: { descriptionFormatter: function (point) { var ix = point.index + 1, xName = getPointCategoryName(point, 'x'), yName = getPointCategoryName(point, 'y'), val = point.value; return ix + '. ' + xName + ' sales ' + yName + ', ' + val + '.'; } } }, colorAxis: { // min: -50, minColor: '#ff3300', maxColor: '#009933' }, tooltip: { formatter: function () { return '<b>' + getPointCategoryName(this.point, 'x') + '</b> sold <br><b>' + this.point.value + '</b> items on <br><b>' + getPointCategoryName(this.point, 'y') + '</b>'; } }, plotOptions: { series: { dataLabels: { formatter: function() { return `${this.point.value}%` } } } }, series: [{ borderWidth: 1, data:[ [0, 0, -10], [0, 1, 10], [0, 2, -5], [1, 0, 21], [1, 1, -10], [1, 2, 5], [2, 0, -13], [2, 1, 53], [2, 2, 15], ], dataLabels: { enabled: true, color: '#000000' } }, { borderWidth: 1, data:[ [0, 0, 15], [0, 1, 11], [0, 2, -5], [1, 0, 25], [1, 1, -5], [1, 2, 9], [2, 0, -14], [2, 1, 65], [2, 2, 25], ], dataLabels: { enabled: true, color: '#000000' }, yAxis: 1, } ], responsive: { rules: [{ condition: { maxWidth: 500 }, chartOptions: { yAxis: { labels: { formatter: function () { return this.value.charAt(0); } } } } }] } });

 <script src="https://code.highcharts.com/highcharts.js"></script> <script src="https://code.highcharts.com/modules/heatmap.js"></script> <div id="container"></div>

Answer 1

实现此目的的其他方法是设置热图中每个data-points的color 。因此，使用heatmap获取series数据heatMapChart.series然后使用for-loop并访问每个数据点的values 。 最后，更新您的数据点颜色，即：绿色或红色。

演示代码：

 function getPointCategoryName(point, dimension) { var series = point.series, isY = dimension === 'y', axis = series[isY? 'yAxis': 'xAxis']; return axis.categories[point[isY? 'y': 'x']]; } var heatMapChart = Highcharts.chart('container', { chart: { type: 'heatmap', }, xAxis: { categories: ['val1', 'val2', 'val3', ] }, yAxis: [{ title: { text: 'iPhone' }, height: '50%', lineWidth: 2, categories: ['google', 'bing', 'bing', ] }, { title: { text: 'iPad' }, height: '50%', top: '50%', offset: 0, lineWidth: 2, categories: ['google', 'bing', 'bing', ] }], accessibility: { point: { descriptionFormatter: function(point) { var ix = point.index + 1, xName = getPointCategoryName(point, 'x'), yName = getPointCategoryName(point, 'y'), val = point.value; return ix + '. ' + xName + ' sales ' + yName + ', ' + val + '.'; } } }, tooltip: { formatter: function() { return '<b>' + getPointCategoryName(this.point, 'x') + '</b> sold <br><b>' + this.point.value + '</b> items on <br><b>' + getPointCategoryName(this.point, 'y') + '</b>'; } }, plotOptions: { series: { dataLabels: { formatter: function() { return `${this.point.value}%` }, } } }, series: [{ borderWidth: 1, data: [ [0, 0, -10], [0, 1, 10], [0, 2, -5], [1, 0, 21], [1, 1, -10], [1, 2, 5], [2, 0, -13], [2, 1, 53], [2, 2, 15], ], dataLabels: { enabled: true, color: '#000000' }, showInLegend: false }, { borderWidth: 1, data: [ [0, 0, 15], [0, 1, 11], [0, 2, -5], [1, 0, 25], [1, 1, -5], [1, 2, 9], [2, 0, -14], [2, 1, 65], [2, 2, 25], ], dataLabels: { enabled: true, color: '#000000' }, showInLegend: false, yAxis: 1, }], responsive: { rules: [{ condition: { maxWidth: 500 }, chartOptions: { yAxis: { labels: { formatter: function() { return this.value.charAt(0); } } } } }] } }); //get series... var dataPoints = heatMapChart.series; //loop through series for (var i = 0; i < dataPoints.length; i++) { //get data inside series.. for (var j = 0; j < dataPoints[i].data.length; j++) { //update data.. dataPoints[i].data[j].update({ color: dataPoints[i].data[j].options.value > 0? '#009933': '#ff3300' //change value depending on value.. }); } }

 <script src="https://code.highcharts.com/highcharts.js"></script> <script src="https://code.highcharts.com/modules/heatmap.js"></script> <div id="container"></div>