Highcharts:Highmaps - Choropleth 地图 - 所有州都是相同的颜色 [英] Highcharts: Highmaps - Choropleth maps - All states are the same color

查看:25
本文介绍了Highcharts:Highmaps - Choropleth 地图 - 所有州都是相同的颜色的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

<头><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><脚本>$(函数(){$.getJSON('/HighChart/GetStates', 函数(数据){//使代码大写以匹配地图数据$.each(数据,函数(){this.State = this.State.toUpperCase();});//实例化地图$('#container').highcharts('地图', {图表 : {边框宽度:1},标题 : {文本:'每个州的销售额'},传奇: {布局:'水平',边框宽度:0,backgroundColor: 'rgba(255,255,255,0.85)',浮动:真实,垂直对齐:'顶部',y:25},地图导航:{启用:真},颜色轴:{分钟:1,最大:5000000,类型:'对数',minColor: '#EEEEFF',maxColor: '#000022',停止: [[0, '#EFEFFF'],[.67, '#4444FF'],[1, '#000022']]},系列 : [{动画片: {持续时间:1000},数据:数据,mapData: Highcharts.maps['countries/us/us-all'],joinBy: ['邮政编码', '州'],数据标签:{启用:真,颜色:'#FFFFFF',格式:'{point.State}'},name: '总销售额',工具提示:{pointFormat: '{point.State}: {point.TotalSales}'}}]});});});<title>地图</title><身体><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);">返回</p>

我的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}]

解决方案

value 未设置 JSON 中的属性.您的工具提示有效,因为您更改了它的格式,但您没有为点设置任何值(在 Highcharts 中).试试这个:

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

I have copied the demo code for the United States color axis map from the Highcharts website and substituted my own JSon file of values. The values are showing up in the tooltip and the legend has color gradients and values, but the states are all one medium blue color. The file values range from a few hundred to almost $4 million dollars for the states. This html page is being called in 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>

My Json file is as follows:

[
{"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}]

解决方案

value property in your JSON is not set. Your tooltip works, because you changed it's format, but you didn't set any values (in Highcharts terms) for points. Try this:

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

这篇关于Highcharts:Highmaps - Choropleth 地图 - 所有州都是相同的颜色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆