如何使用 setData 在 HighMaps 中的 JSON 数据集之间切换?
How can I switch between JSON data sets in HighMaps using setData?
我有一个 Highmap,其中填充了使用 getJSON 获取的数据。我想要实现的是有一个按钮(或下拉菜单)允许我在两个或多个数据集之间切换。
我已经看到这个问题以不同的方式被问过几次(例如 this one),并且阅读了我认为对我需要做什么的大致想法的答案,但我仍然卡住了。 FWIW 我是一个完全的新手,只是想为我的同事做一些事情,所以我的错误可能是根本性的,也可能只是语法问题。
现在为了向自己证明我可以让它工作,我尝试实现一个按钮,单击该按钮后,只需使用 setData 切换到第二个数据集。虽然地图显示正确,而且我知道两个 JSON 文件都在加载,但我无法让开关工作。
这是我的完整尝试:http://jsfiddle.net/osc9m3e7/4/
我确定的部分不正确:
$('#setdata').click(function() {
Highcharts.mapChart.series[0].setData(data1);
});
如果有任何提示可以帮助我走上正轨,我将不胜感激。
由 ewolden 在评论中回答。我的问题是我没有命名图表,因此无法使用 setData 对其进行操作。工作示例现在在这里:http://jsfiddle.net/osc9m3e7/7/
var AccessMap = Highcharts.mapChart('container', {
...
$('#setdata').click(function() {
AccessMap.series[0].setData(data2);
});
您可能已经注意到,每次设置新数据时,国家的边界都会变得更粗。出现这种情况是因为数据对象没有被复制而是直接使用,所以被修改了。要复制特定对象,您可以使用例如 slice()
函数。您可以在下面找到一个示例,其中数据集之间的切换工作正常。
API参考:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice
我有一个 Highmap,其中填充了使用 getJSON 获取的数据。我想要实现的是有一个按钮(或下拉菜单)允许我在两个或多个数据集之间切换。
我已经看到这个问题以不同的方式被问过几次(例如 this one),并且阅读了我认为对我需要做什么的大致想法的答案,但我仍然卡住了。 FWIW 我是一个完全的新手,只是想为我的同事做一些事情,所以我的错误可能是根本性的,也可能只是语法问题。
现在为了向自己证明我可以让它工作,我尝试实现一个按钮,单击该按钮后,只需使用 setData 切换到第二个数据集。虽然地图显示正确,而且我知道两个 JSON 文件都在加载,但我无法让开关工作。
这是我的完整尝试:http://jsfiddle.net/osc9m3e7/4/
我确定的部分不正确:
$('#setdata').click(function() {
Highcharts.mapChart.series[0].setData(data1);
});
如果有任何提示可以帮助我走上正轨,我将不胜感激。
由 ewolden 在评论中回答。我的问题是我没有命名图表,因此无法使用 setData 对其进行操作。工作示例现在在这里:http://jsfiddle.net/osc9m3e7/7/
var AccessMap = Highcharts.mapChart('container', {
...
$('#setdata').click(function() {
AccessMap.series[0].setData(data2);
});
您可能已经注意到,每次设置新数据时,国家的边界都会变得更粗。出现这种情况是因为数据对象没有被复制而是直接使用,所以被修改了。要复制特定对象,您可以使用例如 slice()
函数。您可以在下面找到一个示例,其中数据集之间的切换工作正常。
API参考:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice