Question

这是js小提琴Working Map

    Highcharts.mapChart('container', {

    chart: {
        map: 'countries/us/us-all',
        borderWidth: 1
    },

    title: {
        text: 'US population density (/km²)'
    },

    exporting: {
        sourceWidth: 600,
        sourceHeight: 500
    },

    legend: {
        layout: 'horizontal',
        borderWidth: 0,
        backgroundColor: 'rgba(255,255,255,0.85)',
        floating: true,
        verticalAlign: 'top',
        y: 25
    },

    mapNavigation: {
        enabled: true
    },

    colorAxis: {
        min: 1,
        type: 'logarithmic',
        minColor: '#EEEEFF',
        maxColor: '#000022',
        stops: [
            [0, '#EFEFFF'],
            [0.67, '#4444FF'],
            [1, '#000022']
        ]
    },

    series: [{
        animation: {
            duration: 1000
        },
        data: data,
        joinBy: ['postal-code', 'code'],
        dataLabels: {
            enabled: true,
            color: '#FFFFFF',
            format: '{point.code}'
        },
        name: 'Population density',
        tooltip: {
            pointFormat: '{point.code}: {point.value}/km²'
        }
    }]
});

现在这里是同一张地图，但map-not-working不起作用

var data = [
{
    "value": 0,
    "code": "nj"
},
{
    "value": 387.35,
    "code": "ri"
},
{
    "value": 312.68,
    "code": "ma"
},
{
    "value": 271.4,
    "code": "ct"
},
{
    "value": 209.23,
    "code": "md"
},
{
    "value": 195.18,
    "code": "ny"
},
{
    "value": 154.87,
    "code": "de"
},
{
    "value": 114.43,
    "code": "fl"
},
{
    "value": 107.05,
    "code": "oh"
},
{
    "value": 105.8,
    "code": "pa"
},
{
    "value": 86.27,
    "code": "il"
},
{
    "value": 83.85,
    "code": "ca"
},
{
    "value": 72.83,
    "code": "hi"
},
{
    "value": 69.03,
    "code": "va"
},
{
    "value": 67.55,
    "code": "mi"
},
{
    "value": 65.46,
    "code": "in"
},
{
    "value": 63.8,
    "code": "nc"
},
{
    "value": 54.59,
    "code": "ga"
},
{
    "value": 53.29,
    "code": "tn"
},
{
    "value": 53.2,
    "code": "nh"
},
{
    "value": 51.45,
    "code": "sc"
},
{
    "value": 39.61,
    "code": "la"
},
{
    "value": 39.28,
    "code": "ky"
},
{
    "value": 38.13,
    "code": "wi"
},
{
    "value": 34.2,
    "code": "wa"
},
{
    "value": 33.84,
    "code": "al"
},
{
    "value": 31.36,
    "code": "mo"
},
{
    "value": 30.75,
    "code": "tx"
},
{
    "value": 29,
    "code": "wv"
},
{
    "value": 25.41,
    "code": "vt"
},
{
    "value": 23.86,
    "code": "mn"
},
{
    "value": 23.42,
    "code": "ms"
},
{
    "value": 20.22,
    "code": "ia"
},
{
    "value": 19.82,
    "code": "ar"
},
{
    "value": 19.4,
    "code": "ok"
},
{
    "value": 17.43,
    "code": "az"
},
{
    "value": 16.01,
    "code": "co"
},
{
    "value": 15.95,
    "code": "me"
},
{
    "value": 13.76,
    "code": "or"
},
{
    "value": 12.69,
    "code": "ks"
},
{
    "value": 10.5,
    "code": "ut"
},
{
    "value": 8.6,
    "code": "ne"
},
{
    "value": 7.03,
    "code": "nv"
},
{
    "value": 6.04,
    "code": "id"
},
{
    "value": 5.79,
    "code": "nm"
},
{
    "value": 3.84,
    "code": "sd"
},
{
    "value": 3.59,
    "code": "nd"
},
{
    "value": 2.39,
    "code": "mt"
},
{
    "value": 1.96,
    "code": "wy"
},
{
    "value": 0.42,
    "code": "ak"
}]



    Highcharts.mapChart('container', {

    chart: {
        map: 'countries/us/us-all',
        borderWidth: 1
    },

    title: {
        text: 'US population density (/km²)'
    },

    exporting: {
        sourceWidth: 600,
        sourceHeight: 500
    },

    legend: {
        layout: 'horizontal',
        borderWidth: 0,
        backgroundColor: 'rgba(255,255,255,0.85)',
        floating: true,
        verticalAlign: 'top',
        y: 25
    },

    mapNavigation: {
        enabled: true
    },

    colorAxis: {
        min: 0,
        type: 'logarithmic',
        minColor: '#EEEEFF',
        maxColor: '#000022',
        stops: [
            [0, '#EFEFFF'],
            [0.67, '#4444FF'],
            [1, '#000022']
        ]
    },

    series: [{
        animation: {
            duration: 1000
        },
        data: data,
        joinBy: ['postal-code', 'code'],
        dataLabels: {
            enabled: true,
            color: '#FFFFFF',
            format: '{point.code}'
        },
        name: 'Population density',
        tooltip: {
            pointFormat: '{point.code}: {point.value}/km²'
        }
    }]
});

因为数据的值为零。我也想在地图上显示零值。我还将colorAxis.min值更改为零，但highchart抛出此错误

这是查看演示的链接，该链接显示在highchart错误图片demo link中。链接也抛出404错误。

Answer 1

由于高对数图表中的值不能为零，因此您从highcharts中收到代码10错误。根据highcharts文档中的this链接：

在以下情况下会发生此错误：



如果将零或零以下的数据值添加到对数轴



对数轴的最小值设置为0或更小



如果阈值设置为0或更小

因此，您只需要将图表类型从logarthmic更改为其他任何图表。在这里，您可以根据this API参考使用默认类型linear。因此，您可以简单地注释掉type: 'logarithmic'。我在下面的链接中对您的代码进行了修改：

JSFiddle：https://jsfiddle.net/atkfp0y5/

API参考：https://api.highcharts.com/highcharts/colorAxis.type

highcharts / highmap中的零值

1 个答案: