Highmaps查看数据表 - Export-data.js

时间:2017-11-07 16:52:30

标签: javascript jquery highcharts

我创建了一个地图并尝试查看数据表。我正在使用export-data.js。    它给了我州名而不是价值。

以下是我创建的jsFiddle的链接。任何帮助表示赞赏。

    var data = [{ "hc-key": "us-wa", "Value": 40389 }, { "hc-key": "us-wi", "Value": 25851 }, { "hc-key": "us-mi", "Value": 51140 }, { "hc-key": "us-ne", "Value": 8270 }, { "hc-key": "us-dc", "Value": 5346 }, { "hc-key": "us-ia", "Value": 11540 }, { "hc-key": "us-ky", "Value": 22285 }, { "hc-key": "us-nm", "Value": 16941 }, { "hc-key": "us-pa", "Value": 62291 }, { "hc-key": "us-id", "Value": 6287 }, { "hc-key": "us-ms", "Value": 12345 }, { "hc-key": "us-nd", "Value": 2124 }, { "hc-key": "us-az", "Value": 26028 }, { "hc-key": "us-md", "Value": 30335 }, { "hc-key": "us-sd", "Value": 2016 }, { "hc-key": "us-fl", "Value": 62238 }, { "hc-key": "us-ca", "Value": 94603 }, { "hc-key": "us-tx", "Value": 89376 }, { "hc-key": "us-ar", "Value": 4600 }, { "hc-key": "us-de", "Value": 1657 }, { "hc-key": "us-in", "Value": 10703 }, { "hc-key": "us-il", "Value": 14607 }, { "hc-key": "us-me", "Value": 1065 }, { "hc-key": "us-ma", "Value": 6693 }, { "hc-key": "us-va", "Value": 11208 }];

    $(document).ready(function () {
        Highcharts.seriesTypes.map.prototype.exportKey = 'name';

        //Highcharts.seriesTypes.map.prototype.exportValue = 'data';

        $('#container').highcharts('Map', {
            chart: {
                animation: true
            },
            title: {
                text: 'Map'
            },
            mapNavigation: {
                enabled: true,
                buttonOptions: {
                    verticalAlign: 'top'
                }
            },
            credits: {
                enabled: false
            },
            series: [{
                type: 'map',
                data: data,
                color: '#25873a',
                joinBy: 'hc-key',
                mapData: Highcharts.maps['countries/us/us-all'],
                name: 'States',
                states: {
                   
                    hover: {
                        color: '#BADA55'
                    }
                },

                dataLabels: {
                    enabled: true,
                    format: '{point.properties.postal-code}'
                },
                tooltip: {
                    headerFormat: '<span style="font-size:15px"> Count</span><br/>',
                    pointFormat: '<span style="font-size:18px">{point.properties.postal-code}: {point.Value:,.0f}</span>'
                }
            }],
        });
    });
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/maps/highmaps.js"></script>

<script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
<script src="http://highcharts.github.io/export-csv/export-csv.js"></script>
<script src="https://code.highcharts.com/mapdata/countries/us/us-all.js"></script>
<div id="container"></div>

谢谢,
   Naveen Mandava。

1 个答案:

答案 0 :(得分:0)

您应该在数据中使用value代替Value

修复示例: https://jsfiddle.net/kkulig/47gqc0wv/