HighMap显示自定义json文件的问题

HighMap displaying issue with customized json file

本文关键字：问题 文件 json 显示 自定义 HighMap      更新时间：2023-09-26

我正在尝试加载json文件与三个变量到HighMap.

在修改后的JSON中，我包括了三列:1. 代码2。值3。平均工资

我能够通过main.js加载JSON文件，但是随着中位数工资的添加，地图失去了梯度，我无法在悬停显示框中为中位数工资开始新的行。

HighCharts的演示是这样的:http://jsfiddle.net/gh/get/jquery/1.9.1/hililide-software/highcharts.com/tree/master/samples/maps/demo/color-axis/

如有任何意见，我们将不胜感激。

谢谢!

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

问题是您使用Code和Value参数而不是小写。因此，如果你替换它，并添加关于中位数的信息到pointFormat，当所有的工作。

数据:

{
        "code": "AL",
        "value": 11.8,
        "MedianW": 40120
}

工具提示:pointFormat: '{point.code}: {point.value}/km² : MedianW: {point.MedianW}'

示例:http://jsfiddle.net/9NMbm/

相关文章：