本文介绍了高位图在绿色范围内为正数，在红色范围内为负数。的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在一个容器中有多个热图。我想设置颜色轴，以便正数落在绿色范围内，负数落在红色范围内。因此，我将colorAxis: minColor设置为#009933，将colorAxis: maxColor设置为#ff3300。这并不是将所有负片设置为红色范围，将正片设置为红色范围。我可以使用HighChats执行此操作吗？
以下是我的代码： 数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">
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>推荐答案
的另一种方法是在heatmap中设置每个data-points的color。因此，使用获取series数据，然后使用for-loop并访问每个数据点的values。最后，更新数据点颜色，即：绿色或红色。
演示代码：
数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">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>这篇关于高位图在绿色范围内为正数，在红色范围内为负数。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！