Highcharts：Highmaps - Choropleth地图 - 所有状态都是相同的颜色 [英] Highcharts: Highmaps - Choropleth maps - All states are the same color
本文介绍了Highcharts：Highmaps - Choropleth地图 - 所有状态都是相同的颜色的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我从Highcharts网站复制了美国色轴映射的演示代码，并替换了我自己的JSon文件的值。这些值显示在工具提示中，并且图例具有颜色渐变和值，但状态都是一种中等蓝色。这些州的档案价值从几百到几百万美元不等。这个HTML页面在MVC5中被调用。
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>
我的Json文件如下：
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屋！
查看全文
