#javascript #jquery #highcharts #colors #heatmap
Вопрос:
У меня есть несколько тепловых карт в одном контейнере. Я хотел установить цветовую ось так, чтобы положительные числа попадали в зеленый диапазон, а отрицательные-в красный. Поэтому я поставил 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> Комментарии:
1. минимальное значение должно быть красным , а максимальное- зеленым .. но в вашем коде вы добавили их наоборот, изменив их, т. е. :
minColor: '#ff3300',maxColor: '#009933'2. @Swati, я изменил это, но многие положительные числа не находятся в зеленовато-красной цветовой гамме. Мне нужны ВСЕ отрицательные числа в красном диапазоне и ВСЕ зеленые числа в зеленом диапазоне
Ответ №1:
Другой способ достичь этого-установить color каждый data-points из них внутри вашего 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> Комментарии:
1. спасибо, быстрый вопрос. Есть ли способ установить диапазон зеленых и диапазон красных цветов. Я имею в виду, что красный становится светлее ближе к 0, а красный становится темнее по мере увеличения отрицательного значения и наоборот для зеленого.
2. Привет, что-то вроде этого графика ?
3. Да, что-то в этом роде
4. Проверьте это , вы можете изменять
from ,toзначения в соответствии с вашими требованиями .