Highmaps/Highcharts setData 不变

Question

尝试在进行下拉选择时更改高图上的数据，但似乎无法正常工作。我想我可能是在错误的事情上调用它（？）我知道正在调用 change() 但数据点永远不会交换。

$(function () {
// Initiate the chart
$('#chart').highcharts('Map', {

    title: {
        text: 'Highmaps basic lat/lon demo'
    },

    mapNavigation: {
        enabled: true
    },

    tooltip: {
        headerFormat: '',
        pointFormat: '<b>{point.name}</b><br>{point.z} Deliveries'
    },
    legend: {
        enabled: false
    },
    series: [{
        // Use the gb-all map with no data as a basemap
        mapData: Highcharts.maps['countries/us/custom/us-all-territories'],
        name: 'Basemap',
        borderColor: '#A0A0A0',
        nullColor: 'rgba(200, 200, 200, 0.3)',
        showInLegend: false
    }, {
        name: 'Separators',
        type: 'mapline',
        data: Highcharts.geojson(Highcharts.maps['countries/us/custom/us-all-territories'],
            'mapline'),
        color: '#707070',
        showInLegend: false,
        enableMouseTracking: false
    }, {
        // Specify points using lat/lon
        type: 'mapbubble',
        name: 'Cities',
        color: Highcharts.getOptions().colors[2],
        data: [{
            'lat': 61.154862,
                'z': 1,
                'lon': -149.886571,
                'name': 'Anchorage'
        }, {
            'lat': 37.353154,
                'z': 1,
                'lon': -120.600837,
                'name': 'Atwater'
        }, {
            'lat': 47.30503,
                'z': 1,
                'lon': -122.206741,
                'name': 'Auburn'
        }, {
            'lat': 30.403614,
                'z': 1,
                'lon': -97.752602,
                'name': 'Austin'
        }, {
            'lat': 43.602311,
                'z': 1,
                'lon': -116.164924,
                'name': 'Boise'
        }, {
            'lat': 42.973088,
                'z': 1,
                'lon': -78.845,
                'name': 'Buffalo'
        }, {
            'lat': 35.146685,
                'z': 1,
                'lon': -80.960421,
                'name': 'Charlotte'
        }, {
            'lat': 39.778264,
                'z': 1,
                'lon': -104.75565,
                'name': 'Denver'
        }, {
            'lat': 64.910879,
                'z': 1,
                'lon': -147.510479,
                'name': 'Fairbanks'
        }, {
            'lat': 35.225736,
                'z': 1,
                'lon': -111.574109,
                'name': 'Flagstaff'
        }, {
            'lat': 19.702522,
                'z': 1,
                'lon': -155.093921,
                'name': 'Hilo'
        }, {
            'lat': 21.294139,
                'z': 5,
                'lon': -157.828388,
                'name': 'Honolulu'
        }, {
            'lat': 48.416427,
                'z': 1,
                'lon': -122.326548,
                'name': 'Mount Vernon'
        }, {
            'lat': 45.337718,
                'z': 1,
                'lon': -122.569991,
                'name': 'Oregon City'
        }, {
            'lat': 40.179535,
                'z': 1,
                'lon': -122.238281,
                'name': 'Red Bluff'
        }, {
            'lat': 34.113155,
                'z': 1,
                'lon': -117.377133,
                'name': 'Rialto'
        }, {
            'lat': 37.718968,
                'z': 3,
                'lon': -122.409577,
                'name': 'San Francisco'
        }, {
            'lat': 47.205395,
                'z': 1,
                'lon': -122.533562,
                'name': 'Tacoma'
        }, {
            'lat': 45.712017,
                'z': 2,
                'lon': -122.632226,
                'name': 'Vancouver'
        }]
    }]
});

$("#course_form").change(function (e) {
    var newdata = [{
        'lat': 30.40334,
        'z': 1,
        'lon': -88.960499,
        'name': 'Biloxi'
    }, {
        'lat': 41.200508,
        'z': 1,
        'lon': -73.168771,
        'name': 'Bridgeport'
    }, {
        'lat': 40.649748,
        'z': 2,
        'lon': -73.882375,
        'name': 'Brooklyn'
    }, {
        'lat': 26.707947,
        'z': 1,
        'lon': -81.859447,
        'name': 'Fort Myers'
    }, {
        'lat': 40.7445,
        'z': 1,
        'lon': -74.032863,
        'name': 'Hoboken'
    }, {
        'lat': 21.294139,
        'z': 6,
        'lon': -157.828388,
        'name': 'Honolulu'
    }, {
        'lat': 21.981618,
        'z': 1,
        'lon': -159.368258,
        'name': 'Lihue'
    }, {
        'lat': 30.647431,
        'z': 1,
        'lon': -88.229245,
        'name': 'Mobile'
    }, {
        'lat': 41.296284,
        'z': 1,
        'lon': -72.937307,
        'name': 'New Haven'
    }, {
        'lat': 40.710537,
        'z': 4,
        'lon': -74.016323,
        'name': 'New York'
    }, {
        'lat': 28.487102,
        'z': 1,
        'lon': -81.408162,
        'name': 'Orlando'
    }, {
        'lat': 26.113639,
        'z': 1,
        'lon': -80.271019,
        'name': 'Plantation'
    }, {
        'lat': 40.904341,
        'z': 1,
        'lon': -72.410271,
        'name': 'Southampton'
    }, {
        'lat': 39.588149,
        'z': 1,
        'lon': -74.364586,
        'name': 'Tuckerton'
    }];
    var course = $("#course_form option:selected").text();
    $('#chart').highcharts().series[0].setData(data_dict[newdata]);
});

});

Answer 1

正在调用您的 change() 函数，但您将新数据发送到错误的系列，并且您没有定义 data_dict 函数。如果您想在用户更改下拉值时交换新的 mapbubble 数据，您需要将代码更改为：

$('#chart').highcharts().series[2].setData(newdata);

如果您查看 highchart 初始化函数，您会看到 series 是一个数组，您需要为数据使用正确的索引，即 2.

这是 jsfiddle 的修改版本。

希望对您有所帮助。

Highmaps/Highcharts setData 不变

Highmaps/Highcharts setData not changing

javascript

jquery

highcharts

highmaps