Я пытаюсь загрузить файл json с тремя переменными в HighMap.
В моем исправленном JSON я включил три столбца: 1. Код 2. Значение 3. Медианная заработная плата
Я смог загрузить файл JSON через main.js, но с добавлением медианной заработной платы карта потеряла свой градиент, и я не смог начать новую строку для медианной заработной платы в поле отображения при наведении курсора.
Демонстрация с HighCharts выглядит так: http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/maps/demo/color-ось/
Любой вклад будет высоко оценен.
Благодарю вас!
Файл HTM
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highmaps Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<style type="text/css">
${demo.css}
</style>
</head>
<body>
<script src="js/main.js"></script>
<script src="js/highmaps.js"></script>
<script src="http://code.highcharts.com/mapdata/countries/us/us-all.js"></script>
<script src="js/modules/data.js"></script>
<div id="container" style="height: 500px; min-width: 310px; max-width: 600px; margin: 0 auto"></div>
</body>
</html>
Основные js
function create_chart() {
$.getJSON('data.json', function (data) {
// Make codes uppercase to match the map data
$.each(data, function () {
this.Code = this.Code.toUpperCase();
});
console.log(data);
// Instanciate the map
$('#container').highcharts('Map', {
chart : {
borderWidth : 1
},
title : {
text : 'US Density vs Median Wage'
},
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: '#eefff1',
maxColor: '#000022',
stops: [[0, '#effff5'],
[0.67, '#61ae0e'],
[1, '#000022']]
},
series : [{
animation: {
duration: 1000
},
data : data,
mapData: Highcharts.maps['countries/us/us-all'],
joinBy: ['postal-code','Code'],
dataLabels: {
enabled: true,
color: 'white',
format: '{point.Code}'
},
name: 'US Density vs Median Wage',
tooltip: {
pointFormat: '{point.Code}: {point.Value}% \n Median Wage: ${point.MedianW}'
}
}]
});
});
}
$(document).ready(create_chart);
JSON-файл
[
{
"Code":"AL",
"Value":11.8,
"MedianW":40120
},
{
"Code":"AK",
"Value":24.5,
"MedianW":53804
},
{
"Code":"AZ",
"Value":6,
"MedianW":42107
},
{
"Code":"AR",
"Value":4.1,
"MedianW":36505
},
{
"Code":"CA",
"Value":17.4,
"MedianW":48415
},
{
"Code":"CO",
"Value":9.2,
"MedianW":49549
},
{
"Code":"CT",
"Value":14.3,
"MedianW":58337
},
{
"Code":"DE",
"Value":11,
"MedianW":48284
},
{
"Code":"DC",
"Value":10.9,
"MedianW":50186
},
{
"Code":"FL",
"Value":6.9,
"MedianW":41915
},
{
"Code":"GA",
"Value":6.3,
"MedianW":41214
},
{
"Code":"HI",
"Value":23.6,
"MedianW":49919
},
{
"Code":"ID",
"Value":5.8,
"MedianW":41785
},
{
"Code":"IL",
"Value":16.3,
"MedianW":47485
},
{
"Code":"IN",
"Value":10.2,
"MedianW":42089
},
{
"Code":"IA",
"Value":12,
"MedianW":42207
},
{
"Code":"KS",
"Value":8.4,
"MedianW":42577
},
{
"Code":"KY",
"Value":13,
"MedianW":40020
},
{
"Code":"LA",
"Value":5.5,
"MedianW":37967
},
{
"Code":"ME",
"Value":13.1,
"MedianW":41488
},
{
"Code":"MD",
"Value":13.1,
"MedianW":58269
},
{
"Code":"MA",
"Value":14.6,
"MedianW":55602
},
{
"Code":"MI",
"Value":16.8,
"MedianW":45029
},
{
"Code":"MN",
"Value":15,
"MedianW":48097
},
{
"Code":"MS",
"Value":4.2,
"MedianW":36240
},
{
"Code":"MO",
"Value":10.4,
"MedianW":41092
},
{
"Code":"MT",
"Value":14.8,
"MedianW":42301
},
{
"Code":"NE",
"Value":9,
"MedianW":41861
},
{
"Code":"NV",
"Value":16.1,
"MedianW":44924
},
{
"Code":"NH",
"Value":10.7,
"MedianW":52588
},
{
"Code":"NJ",
"Value":16.6,
"MedianW":61146
},
{
"Code":"NM",
"Value":7.4,
"MedianW":38349
},
{
"Code":"NY",
"Value":25.8,
"MedianW":47790
},
{
"Code":"NC",
"Value":4.7,
"MedianW":40710
},
{
"Code":"ND",
"Value":8.5,
"MedianW":41557
},
{
"Code":"OH",
"Value":14.1,
"MedianW":42814
},
{
"Code":"OK",
"Value":9.5,
"MedianW":40665
},
{
"Code":"OR",
"Value":14.9,
"MedianW":43160
},
{
"Code":"PA",
"Value":13.7,
"MedianW":47439
},
{
"Code":"RI",
"Value":17.8,
"MedianW":46896
},
{
"Code":"SC",
"Value":4.6,
"MedianW":39238
},
{
"Code":"SD",
"Value":5.8,
"MedianW":38071
},
{
"Code":"TN",
"Value":7.4,
"MedianW":39891
},
{
"Code":"TX",
"Value":6,
"MedianW":41225
},
{
"Code":"UT",
"Value":5.4,
"MedianW":50976
},
{
"Code":"VT",
"Value":13.2,
"MedianW":46019
},
{
"Code":"VA",
"Value":6.4,
"MedianW":53328
},
{
"Code":"WA",
"Value":19.7,
"MedianW":52724
},
{
"Code":"WV",
"Value":13.6,
"MedianW":41499
},
{
"Code":"WI",
"Value":13.1,
"MedianW":43661
},
{
"Code":"WY",
"Value":6.4,
"MedianW":45336
}
]
