Highmaps min/max 颜色未按预期工作
Highmaps min/max color not working as expected
我正在尝试使用 Highcharts 在世界地图上可视化数据值。
最高值应在地图上显示为黑色填充,最小值应显示为白色区域。但是,绘制的颜色与 minColor 和 maxColor 设置不匹配。
是我做错了什么还是 Highmaps 中的错误?
这是完整的示例代码。我还准备了一个 JSFiddle mock。谢谢你的帮助。
// sample data
var values = [
{
code: "PL",
value: 743
},
{
code: "FR",
value: 8205
},
{
code: "DE",
value: 2303
},
{
code: "BR",
value: 9404
},
{
code: "ZA",
value: 2937
},
{
code: "ES",
value: 2390
},
{
code: "IE",
value: 2604
},
{
code: "UK",
value: 5302
},
{
code: "US",
value: 5178
}
];
// init min/max with first item
var valuesMin = values[0].value;
var valuesMax = values[0].value;
// find the real min and max
for(var i=0; i<=values.length-1; i++) {
// save max of all interactions
if (values[i].value > valuesMax) {
valuesMax = values[i].value;
}
// save min of all interactions
if (values[i].value < valuesMin) {
valuesMin = values[i].value;
}
}
// doublecheck min and max boundaries
console.log(valuesMin);
console.log(valuesMax);
// Initiate the chart
var config = {
chart: {
renderTo: 'container',
type: 'map',
spacing: [0,0,0,0],
plotBorderWidth: 0,
plotBackgroundColor: '#ffffff'
},
title: {
text: ''
},
subtitle: {
text: ''
},
legend: {
enabled: false
},
credits: {
enabled: false
},
tooltip: {
enabled: false
},
mapNavigation: {
enabled: false
},
colorAxis: {
minColor: '#ffffff',
maxColor: '#000000',
min: valuesMin,
max: valuesMax,
minorTickInterval: 0.1,
tickLength: 0,
type: 'linear'
},
plotOptions: {
map: {
states: {
hover: {
enabled: false
},
normal: {
animation: false
}
}
}
},
// The map series
series : [
{
mapData: Highcharts.maps['custom/world'],
data : values,
joinBy: ['iso-a2', 'code']
}
]
};
console.log(values);
var chart = new Highcharts.Map(config);
您的色轴 min
和 max
正在四舍五入。来自 the API:
If the startOnTick
option is true, the min value might be rounded down.
默认为true
。要解决此问题,只需添加此代码:
colorAxis: {
// ...
startOnTick: false,
endOnTick: false
}
如 this updated JSFiddle 演示。
我正在尝试使用 Highcharts 在世界地图上可视化数据值。
最高值应在地图上显示为黑色填充,最小值应显示为白色区域。但是,绘制的颜色与 minColor 和 maxColor 设置不匹配。
是我做错了什么还是 Highmaps 中的错误?
这是完整的示例代码。我还准备了一个 JSFiddle mock。谢谢你的帮助。
// sample data
var values = [
{
code: "PL",
value: 743
},
{
code: "FR",
value: 8205
},
{
code: "DE",
value: 2303
},
{
code: "BR",
value: 9404
},
{
code: "ZA",
value: 2937
},
{
code: "ES",
value: 2390
},
{
code: "IE",
value: 2604
},
{
code: "UK",
value: 5302
},
{
code: "US",
value: 5178
}
];
// init min/max with first item
var valuesMin = values[0].value;
var valuesMax = values[0].value;
// find the real min and max
for(var i=0; i<=values.length-1; i++) {
// save max of all interactions
if (values[i].value > valuesMax) {
valuesMax = values[i].value;
}
// save min of all interactions
if (values[i].value < valuesMin) {
valuesMin = values[i].value;
}
}
// doublecheck min and max boundaries
console.log(valuesMin);
console.log(valuesMax);
// Initiate the chart
var config = {
chart: {
renderTo: 'container',
type: 'map',
spacing: [0,0,0,0],
plotBorderWidth: 0,
plotBackgroundColor: '#ffffff'
},
title: {
text: ''
},
subtitle: {
text: ''
},
legend: {
enabled: false
},
credits: {
enabled: false
},
tooltip: {
enabled: false
},
mapNavigation: {
enabled: false
},
colorAxis: {
minColor: '#ffffff',
maxColor: '#000000',
min: valuesMin,
max: valuesMax,
minorTickInterval: 0.1,
tickLength: 0,
type: 'linear'
},
plotOptions: {
map: {
states: {
hover: {
enabled: false
},
normal: {
animation: false
}
}
}
},
// The map series
series : [
{
mapData: Highcharts.maps['custom/world'],
data : values,
joinBy: ['iso-a2', 'code']
}
]
};
console.log(values);
var chart = new Highcharts.Map(config);
您的色轴 min
和 max
正在四舍五入。来自 the API:
If the
startOnTick
option is true, the min value might be rounded down.
默认为true
。要解决此问题,只需添加此代码:
colorAxis: {
// ...
startOnTick: false,
endOnTick: false
}
如 this updated JSFiddle 演示。