Highmaps最小/最大颜色未按预期工作

Highmaps min/max color not working as expected

本文关键字：工作 颜色 最小 Highmaps      更新时间：2023-09-26

我正在尝试使用Highcharts在世界地图上可视化数据值。

最大值应在地图上显示为黑色填充，最小值应显示为白色区域。但是，绘制的颜色与minColor和maxColor设置不匹配。

我是做错了什么，还是Highmaps中的错误？

这是完整的示例代码。我还准备了一个JSFiddle模型。谢谢你的帮助。

// 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);

Fiddlehttp://jsfiddle.net/tomexx/bpg544f4/

正在对颜色轴min和max进行舍入。来自API：

如果startOnTick选项为true，则最小值可能会向下取整。

默认为true。要解决此问题，只需添加以下代码：

colorAxis: {
    // ...
    startOnTick: false,
    endOnTick: false
}

正如在这个更新的JSFiddle演示中一样。

相关文章：