Highcharts: Highmaps - Choropleth maps - 所有州都是相同的颜色

Question

我已经从 Highcharts 网站复制了美国色轴地图的演示代码，并替换了我自己的 JSon 值文件。这些值显示在工具提示中，图例具有颜色渐变和值，但状态都是一种中等蓝色。各州的文件价值从几百到近 400 万美元不等。此 html 页面正在 MVC5 中调用。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />

    <script src="https://code.highcharts.com/maps/highmaps.js"></script>
    <script src="https://code.highcharts.com/maps/modules/data.js"></script>
    <script src="https://code.highcharts.com/mapdata/countries/us/us-all.js"></script>
    <script>


    $(function () {
    $.getJSON('/HighChart/GetStates', function (data) {
    // Make codes uppercase to match the map data
    $.each(data, function () {
    this.State = this.State.toUpperCase();
    });

    // Instanciate the map
    $('#container').highcharts('Map', {

    chart : {
    borderWidth : 1
    },

    title : {
    text : 'Sales per State'
    },

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

    mapNavigation: {
    enabled: true
    },

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

    series : [{
    animation: {
    duration: 1000
    },
    data : data,
    mapData: Highcharts.maps['countries/us/us-all'],
    joinBy: ['postal-code', 'State'],
    dataLabels: {
    enabled: true,
    color: '#FFFFFF',
    format: '{point.State}'
     },
    name: 'Total Sales',
    tooltip: {
    pointFormat: '{point.State}: {point.TotalSales}'
    }
    }]
    });
    });
    });
    </script>
    <title>Map</title>

</head>
<body>
    <div id="container" style="height: 500px; min-width: 310px; max-width: 600px; margin: 0 auto"></div>
    <p>
        <a href="javascript:void(0);" onclick="history.go(-1);">Return</a>

    </p>
</body>
</html>

我的Json文件如下：

[
{"Year":2015,"State":"","TotalQuantity":1318,"TotalSales":0.0000,"IsDistributor":0},
{"Year":2015,"State":"AK","TotalQuantity":19,"TotalSales":4745.6900,"IsDistributor":0},
{"Year":2015,"State":"AL","TotalQuantity":148,"TotalSales":38313.9300,"IsDistributor":0},
{"Year":2015,"State":"AR","TotalQuantity":11,"TotalSales":1610.9500,"IsDistributor":0},
{"Year":2015,"State":"AZ","TotalQuantity":154,"TotalSales":42988.8000,"IsDistributor":0},
{"Year":2015,"State":"CA","TotalQuantity":3640,"TotalSales":1634505.3344,"IsDistributor":0},
{"Year":2015,"State":"CO","TotalQuantity":6200,"TotalSales":3863600.7213,"IsDistributor":0},
{"Year":2015,"State":"CT","TotalQuantity":2240,"TotalSales":400435.9686,"IsDistributor":0},
{"Year":2015,"State":"DE","TotalQuantity":4328,"TotalSales":1236465.4315,"IsDistributor":0},
{"Year":2015,"State":"FL","TotalQuantity":3689,"TotalSales":674759.7803,"IsDistributor":0},
{"Year":2015,"State":"GA","TotalQuantity":3182,"TotalSales":795062.7901,"IsDistributor":0},
{"Year":2015,"State":"HI","TotalQuantity":17,"TotalSales":21887.0000,"IsDistributor":0},
{"Year":2015,"State":"IA","TotalQuantity":227,"TotalSales":58511.3800,"IsDistributor":0},
{"Year":2015,"State":"ID","TotalQuantity":199,"TotalSales":64104.1200,"IsDistributor":0},
{"Year":2015,"State":"IL","TotalQuantity":1356,"TotalSales":481361.1978,"IsDistributor":0},
{"Year":2015,"State":"IN","TotalQuantity":2027,"TotalSales":532739.3100,"IsDistributor":0},
{"Year":2015,"State":"KS","TotalQuantity":940,"TotalSales":216844.0900,"IsDistributor":0},
{"Year":2015,"State":"KY","TotalQuantity":511,"TotalSales":136370.9100,"IsDistributor":0},
{"Year":2015,"State":"LA","TotalQuantity":35,"TotalSales":9926.0500,"IsDistributor":0},
{"Year":2015,"State":"MA","TotalQuantity":4638,"TotalSales":2262278.2147,"IsDistributor":0},
{"Year":2015,"State":"MD","TotalQuantity":4116,"TotalSales":1119331.7664,"IsDistributor":0},
{"Year":2015,"State":"ME","TotalQuantity":1725,"TotalSales":256750.5322,"IsDistributor":0},
{"Year":2015,"State":"MI","TotalQuantity":2837,"TotalSales":785167.4863,"IsDistributor":0},
{"Year":2015,"State":"MN","TotalQuantity":19396,"TotalSales":6560988.9155,"IsDistributor":0},
{"Year":2015,"State":"MO","TotalQuantity":239,"TotalSales":45533.1359,"IsDistributor":0},
{"Year":2015,"State":"MS","TotalQuantity":4,"TotalSales":920.8000,"IsDistributor":0},
{"Year":2015,"State":"MT","TotalQuantity":41,"TotalSales":14209.1000,"IsDistributor":0},
{"Year":2015,"State":"NC","TotalQuantity":5506,"TotalSales":1679007.6369,"IsDistributor":0},
{"Year":2015,"State":"ND","TotalQuantity":5,"TotalSales":883.0000,"IsDistributor":0},
{"Year":2015,"State":"NE","TotalQuantity":49,"TotalSales":12603.4600,"IsDistributor":0},
{"Year":2015,"State":"NH","TotalQuantity":2661,"TotalSales":656975.7190,"IsDistributor":0},
{"Year":2015,"State":"NJ","TotalQuantity":4899,"TotalSales":1857249.7522,"IsDistributor":0},
{"Year":2015,"State":"NM","TotalQuantity":18,"TotalSales":847.1700,"IsDistributor":0},
{"Year":2015,"State":"NV","TotalQuantity":2,"TotalSales":75.0000,"IsDistributor":0},
{"Year":2015,"State":"NY","TotalQuantity":805,"TotalSales":295242.2600,"IsDistributor":0},
{"Year":2015,"State":"OH","TotalQuantity":1712,"TotalSales":533413.1700,"IsDistributor":0},
{"Year":2015,"State":"OR","TotalQuantity":3377,"TotalSales":1164709.0624,"IsDistributor":0},
{"Year":2015,"State":"PA","TotalQuantity":2292,"TotalSales":601890.9000,"IsDistributor":0},
{"Year":2015,"State":"PR","TotalQuantity":2,"TotalSales":115.5000,"IsDistributor":0},
{"Year":2015,"State":"SC","TotalQuantity":2453,"TotalSales":1059821.3817,"IsDistributor":0},
{"Year":2015,"State":"SD","TotalQuantity":250,"TotalSales":84275.1400,"IsDistributor":0},
{"Year":2015,"State":"TN","TotalQuantity":2056,"TotalSales":609389.7013,"IsDistributor":0},
{"Year":2015,"State":"TX","TotalQuantity":1917,"TotalSales":710662.2750,"IsDistributor":0},
{"Year":2015,"State":"UT","TotalQuantity":6416,"TotalSales":1154119.6931,"IsDistributor":0},
{"Year":2015,"State":"VA","TotalQuantity":3021,"TotalSales":479353.2296,"IsDistributor":0},
{"Year":2015,"State":"VT","TotalQuantity":402,"TotalSales":129859.0000,"IsDistributor":0},
{"Year":2015,"State":"WA","TotalQuantity":842,"TotalSales":238343.3901,"IsDistributor":0},
{"Year":2015,"State":"WI","TotalQuantity":12861,"TotalSales":3228575.1303,"IsDistributor":0},
{"Year":2015,"State":"WV","TotalQuantity":1651,"TotalSales":291851.3200,"IsDistributor":0},
{"Year":2015,"State":"WY","TotalQuantity":72,"TotalSales":29821.2600,"IsDistributor":0}]

Answer 1

value 属性在你的 JSON 没有设置。你的工具提示有效，因为你改变了它的格式，但你没有为点设置任何值（在 Highcharts 术语中）。试试这个：

data: data.map(function(el) { 
  el.value = el.TotalSales; 
  return el;
});

Highcharts: Highmaps - Choropleth maps - 所有州都是相同的颜色

Highcharts: Highmaps - Choropleth maps - All states are the same color

json

highcharts

asp.net-mvc-5

highmaps