Question

我正在尝试使用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);

小提琴http://jsfiddle.net/tomexx/bpg544f4/

Answer 1

您的颜色轴min和max正在四舍五入。来自the API：

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

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

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

与this updated JSFiddle演示一样。

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

1 个答案: