Question

我正在尝试使用Highsock和Highmaps并使用ajax调用创建两个动态图表。对于Highmaps，我使用的是Highmaps演示中带有lat / long的Map point示例。 http://www.highcharts.com/maps/demo/mappoint-latlon

脚本如下所示。

<!DOCTYPE html>
<html>
 <head>
    <meta charset="UTF-8">

    <title>Different Maps</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <!-- <script src="http://code.highcharts.com/highcharts.js"></script> -->
    <script src="http://code.highcharts.com/stock/highstock.js"></script>
    <script type="text/javascript" src="http://code.highcharts.com/modules/drilldown.js"></script>
    <script src="http://code.highcharts.com/stock/modules/exporting.js"></script>


    <script src="http://cdnjs.cloudflare.com/ajax/libs/proj4js/2.2.2/proj4.js"></script>

    <script src="http://code.highcharts.com/modules/map.js"></script>
    <script src="http://code.highcharts.com/maps/modules/exporting.js"></script>
    <script src="http://code.highcharts.com/mapdata/custom/world.js"></script>
    <script type="text/javascript" src="js/app/appStart.js" ></script>

    <link type="text/css" href="css/app.css" rel="stylesheet">
 </head>
 <body>
    <div  class="chart" id="statusChart" >
    </div>

    <div class ="chart" id ="geoChart" >
    </div>
 </body>
</html>

$(function() {
    var url = 'statistics';

    $.ajax(url).done(function(data) {
        loadStatusChart(data);
        loadGeoChart(data);
    });
});


function updateStatusSeries(handleData) {
    var url = 'statistics';

    $.ajax(url).done(function(data) {
        var statusCode = data.statusCode[0];
        handleData(statusCode);
    });
}

function updateGeoSeries(handleData) {
    var url = 'statistics';
    $.ajax(url).done(function(data) {

        var geoLocation = data.geoLocation[0];
        handleData(geoLocation);
    });
}


function loadStatusChart(statistics) {
    var StatusCode = statistics.statusCode;

    var StatusSeries = [];
    $.each(StatusCode, function(index, item) {

        var timeInSeconds = item.label/1000;
        for(var i = 10; i >= 1; i--){
            StatusSeries.push({
                x : (timeInSeconds - (i))*1000,
                y : null
            });
        }
        StatusSeries.push({
            x : Number(item.label),
            y : item.value
        });
    })

    $("#statusChart").highcharts('StockChart', {
        chart : {
            type : 'spline',
            animation : Highcharts.svg,
            marginRight : 10,
            events : {
                load : function() {
                    // set up updating of the chart after every 10 seconds
                    // second
                    var series = this.series[0];
                    setInterval(function () {
                        updateStatusSeries(function(statusCode) {
                            var x = (new Date()).getTime();
                            // series.addPoint([x, Math.random()], true, true);
                            series.addPoint([Number(statusCode.label), statusCode.value], true, true);
                        });
                    }, 1000);
                }
            }         
        },
        rangeSelector: {
            buttons: [{
                count: 10,
                type: 'second',
                text: '10s'
            }, {
                count: 5,
                type: 'minute',
                text: '5M'
            }, {
                type: 'all',
                text: 'All'
            }],
            inputEnabled: false,
            selected: 0
        },
        title: {
            text: 'Live Data from Sample Application Servlet'
        },
        xAxis: {
            type: 'datetime'
        },
        yAxis: {
            title: {
                text: 'Number of Clicks'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        // tooltip: {
        //    formatter: function () {
        //        return '<b>' + this.series.name + '</b><br/>' +
        //            Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
        //            Highcharts.numberFormat(this.y, 2);

        legend: {
            enabled: false
        },
        exporting: {
            enabled: false
        },
        series: [{ data: StatusSeries }]
    });
};

function loadGeoChart(statistics) {
    var GeoLocation = statistics.geoLocation;

    var GeoSeries = [];
    $.each(GeoLocation, function(index, item) {
        GeoSeries.push({
            x : item.lat,
            y : item.lon
        });
    })

    // Initiate the chart
    $('#geoChart').highcharts("Map", {
        title: {
            text: 'Highmaps basic lat/lon demo'
        },

        mapNavigation: {
            enabled: true
        },

        tooltip: {
            headerFormat: '',
            pointFormat: '<b>{point.name}</b><br>Lat: {point.lat}, Lon: {point.lon}'
        },

        series: [{
            // Use the custom/world map with no data as a basemap
            mapData: Highcharts.maps['custom/world'],
            name: 'Basemap',
            borderColor: '#A0A0A0',
            nullColor: 'rgba(200, 200, 200, 0.3)',
            showInLegend: false
        }, {
            name: 'Separators',
            type: 'mapline',
            data: Highcharts.geojson(Highcharts.maps['custom/world'], 'mapline'),
            color: '#707070',
            showInLegend: false
        }, {
            // Specify points using lat/lon
            type: 'mappoint',
            name: 'Countries',
            color: Highcharts.getOptions().colors[1],
            data: [{
                load : function() {
                    // set up updating of the chart after every 10 seconds
                    // second
                    var series = this.series[0];
                    setInterval(function () {
                        updateGeoSeries(function(geoLocation) {
                            series.addPoint([geoLocation.lat, geoLocation.lon]);
                        });
                    }, 1000);
                dataLabels: {
                    align: 'left', {
                        x: 5,
                        verticalAlign: 'middle'
                    }
                }

                series: [{ data: GeoSeries }]

                }
            }]
        }]
    });
};

但是当我运行脚本时，highstock图表工作正常，但没有可见的地图，在调试页面时我收到以下错误。

Highcharts.geojson is not a function.

错误出现在这一行。

data: Highcharts.geojson(Highcharts.maps['custom/world'], 'mapline'),

我在这里做错了什么？任何帮助将非常感激。感谢。

HighMap不渲染地图

0 个答案: