Highcharts 热图 - 当分隔值大于“1”时如何使块彼此相邻
Highcharts Heatmap - How to get blocks next to each other when separated by more then '1' in value
附件是我目前遇到的问题的图像。
附件是使用 JSFiddle 手动创建的问题示例
https://jsfiddle.net/ekjrLsz2/
我的目标是让每个块彼此相邻,中间没有所有 space,就像热图显示的默认演示一样。
例如,如果数据是 1 对 1,我可以让它正常工作; 1,2,3,4,5,6
但是如果数据为 5、10、15、20 等...那么您将得到我所附图片中所看到的内容。
所以为了更清楚 X 方向在我的演示图像中是 1 x 1 并且显示没有间距,但是 Y 方向有很大的间距,因为数据没有数字 21,22,23,24 或space 可以这么说,每 5 次之间。
下面是我用来生成图表的代码。
Highcharts.setOptions({
lang: {
decimalPoint: '.',
thousandsSep: ','
}
});
Highcharts.chart('heatmap-container', {
chart: {
type: 'heatmap',
marginTop: 40,
marginBottom: 80,
plotBorderWidth: 1
},
title: {
text: 'Report Data'
},
xAxis: {
//categories: ['1%', '2%', '3%', '4%', '5%', '6%', '7%', '8%', '9%', '10%'],
title: {text:$('#x-values').val()},
//showEmpty:true,
},
yAxis: {
categories: ['5', '10', '15', '20', '25'],
title: {text:$('#y-values').val()},
reversed: false,
//visible: true,
//showEmpty:true,
},
colorAxis: {
max: goodColorVal,
min: badColorVal,
reversed: false,
tickInterval: 1,
//min: -150,
//minColor: '#FFFFFF',
//maxColor: '#00FF00',//Highcharts.getOptions().colors[4]
stops: [
[0.0,'#FF0000'],
[0.5,'#FFFFFF'],
[1.0,"#00FF00"]]
},
legend: {
align: 'right',
layout: 'vertical',
margin: 0,
verticalAlign: 'top',
y: 25,
symbolHeight: 280,
reversed:true
},
tooltip: {
headerFormat: '',
pointFormat: `<b style="text-transform:capitalize;">${$("#x-values option:selected").text()}</b>:{point.x:,.2f} - <b style="text-transform:capitalize;">${$("#y-values option:selected").text()}</b>:{point.y:,.2f} - <b style="text-transform:capitalize;">${$("#z-values option:selected").text()}</b>:{point.value:,.2f}`
// 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>';
// }
},
series: [{
name: 'Report Data For Input 1',
borderWidth: 1,
//data: [[0, 0, 10], [0, 1, 19], [0, 2, 9], [0, 3, 24], [0, 4, 67], [1, 0, 92], [1, 1, 58], [1, 2, 78], [1, 3, 117], [1, 4, 48], [2, 0, 35], [2, 1, 15], [2, 2, 123], [2, 3, 64], [2, 4, 52], [3, 0, 72], [3, 1, 132], [3, 2, 114], [3, 3, 19], [3, 4, 16], [4, 0, 38], [4, 1, 5], [4, 2, 8], [4, 3, 117], [4, 4, 115], [5, 0, 88], [5, 1, 32], [5, 2, 12], [5, 3, 6], [5, 4, 120], [6, 0, 13], [6, 1, 44], [6, 2, 88], [6, 3, 98], [6, 4, 96], [7, 0, 31], [7, 1, 1], [7, 2, 82], [7, 3, 32], [7, 4, 30], [8, 0, 85], [8, 1, 97], [8, 2, 123], [8, 3, 64], [8, 4, 84], [9, 0, 47], [9, 1, 114], [9, 2, 31], [9, 3, 48], [9, 4, 91]],
data: arraydata, //[[0,0,-87],[1,0,22],[2,0,33],[3,0,55]],
dataLabels: {
enabled: false,
color: '#000000'
}
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
yAxis: {
labels: {
formatter: function () {
return this.value.charAt(0);
}
}
}
}
}]
}
});
到目前为止,我已经尝试过 pointInterval 和 tickInterval,但没有成功。
让你的点彼此相邻(没有任何空格)的最简单方法是给它们 x 属性而不跳过任何数字,例如 1,2,3,4...
你为什么不尝试这样做呢?
演示:
https://jsfiddle.net/BlackLabel/39vx468s/
要跳过点之间的空白空间,您可以使用中断功能。
API 参考文献:
https://api.highcharts.com/highcharts/xAxis.breaks
演示:
https://jsfiddle.net/BlackLabel/et4kryvz/
xAxis: {
breaks: [{
from: 0.5,
to: 1.5,
breakSize: 0
}]
}
还有另一种解决方案,它使用 colsize 和 rowsize 属性。多亏了你可以避免以这种方式完全使用中断,它甚至可以处理浮点数据。
附件是我目前遇到的问题的图像。
附件是使用 JSFiddle 手动创建的问题示例
https://jsfiddle.net/ekjrLsz2/
我的目标是让每个块彼此相邻,中间没有所有 space,就像热图显示的默认演示一样。
例如,如果数据是 1 对 1,我可以让它正常工作; 1,2,3,4,5,6
但是如果数据为 5、10、15、20 等...那么您将得到我所附图片中所看到的内容。
所以为了更清楚 X 方向在我的演示图像中是 1 x 1 并且显示没有间距,但是 Y 方向有很大的间距,因为数据没有数字 21,22,23,24 或space 可以这么说,每 5 次之间。
下面是我用来生成图表的代码。
Highcharts.setOptions({
lang: {
decimalPoint: '.',
thousandsSep: ','
}
});
Highcharts.chart('heatmap-container', {
chart: {
type: 'heatmap',
marginTop: 40,
marginBottom: 80,
plotBorderWidth: 1
},
title: {
text: 'Report Data'
},
xAxis: {
//categories: ['1%', '2%', '3%', '4%', '5%', '6%', '7%', '8%', '9%', '10%'],
title: {text:$('#x-values').val()},
//showEmpty:true,
},
yAxis: {
categories: ['5', '10', '15', '20', '25'],
title: {text:$('#y-values').val()},
reversed: false,
//visible: true,
//showEmpty:true,
},
colorAxis: {
max: goodColorVal,
min: badColorVal,
reversed: false,
tickInterval: 1,
//min: -150,
//minColor: '#FFFFFF',
//maxColor: '#00FF00',//Highcharts.getOptions().colors[4]
stops: [
[0.0,'#FF0000'],
[0.5,'#FFFFFF'],
[1.0,"#00FF00"]]
},
legend: {
align: 'right',
layout: 'vertical',
margin: 0,
verticalAlign: 'top',
y: 25,
symbolHeight: 280,
reversed:true
},
tooltip: {
headerFormat: '',
pointFormat: `<b style="text-transform:capitalize;">${$("#x-values option:selected").text()}</b>:{point.x:,.2f} - <b style="text-transform:capitalize;">${$("#y-values option:selected").text()}</b>:{point.y:,.2f} - <b style="text-transform:capitalize;">${$("#z-values option:selected").text()}</b>:{point.value:,.2f}`
// 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>';
// }
},
series: [{
name: 'Report Data For Input 1',
borderWidth: 1,
//data: [[0, 0, 10], [0, 1, 19], [0, 2, 9], [0, 3, 24], [0, 4, 67], [1, 0, 92], [1, 1, 58], [1, 2, 78], [1, 3, 117], [1, 4, 48], [2, 0, 35], [2, 1, 15], [2, 2, 123], [2, 3, 64], [2, 4, 52], [3, 0, 72], [3, 1, 132], [3, 2, 114], [3, 3, 19], [3, 4, 16], [4, 0, 38], [4, 1, 5], [4, 2, 8], [4, 3, 117], [4, 4, 115], [5, 0, 88], [5, 1, 32], [5, 2, 12], [5, 3, 6], [5, 4, 120], [6, 0, 13], [6, 1, 44], [6, 2, 88], [6, 3, 98], [6, 4, 96], [7, 0, 31], [7, 1, 1], [7, 2, 82], [7, 3, 32], [7, 4, 30], [8, 0, 85], [8, 1, 97], [8, 2, 123], [8, 3, 64], [8, 4, 84], [9, 0, 47], [9, 1, 114], [9, 2, 31], [9, 3, 48], [9, 4, 91]],
data: arraydata, //[[0,0,-87],[1,0,22],[2,0,33],[3,0,55]],
dataLabels: {
enabled: false,
color: '#000000'
}
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
yAxis: {
labels: {
formatter: function () {
return this.value.charAt(0);
}
}
}
}
}]
}
});
到目前为止,我已经尝试过 pointInterval 和 tickInterval,但没有成功。
让你的点彼此相邻(没有任何空格)的最简单方法是给它们 x 属性而不跳过任何数字,例如 1,2,3,4... 你为什么不尝试这样做呢?
演示:
https://jsfiddle.net/BlackLabel/39vx468s/
要跳过点之间的空白空间,您可以使用中断功能。
API 参考文献:
https://api.highcharts.com/highcharts/xAxis.breaks
演示:
https://jsfiddle.net/BlackLabel/et4kryvz/
xAxis: {
breaks: [{
from: 0.5,
to: 1.5,
breakSize: 0
}]
}
还有另一种解决方案,它使用 colsize 和 rowsize 属性。多亏了你可以避免以这种方式完全使用中断,它甚至可以处理浮点数据。