如何使用setData在HighMaps中的JSON数据集之间切换?

时间:2017-09-12 12:37:21

标签: javascript json highcharts highmaps

我有一个Highmap,其中填充了使用getJSON获取的数据。我想要实现的是有一个按钮(或下拉列表),允许我在两个或更多数据集之间切换。

我已经以不同的方式(例如this one)看了几次问这个问题,并且阅读答案我认为我对我需要做的事情有一个大概的了解,但我仍然陷入困境。 FWIW我是一个完整的新手,只是想让一些事情为我的同事工作,所以我的错误可能是基本的,或者只是语法问题。

现在向我自己证明我可以使它工作我已经尝试实现一个按钮,一旦点击,只需使用setData切换到第二个数据集。虽然地图显示正确,并且我知道正在加载两个JSON文件,但我无法使交换机正常工作。

以下是我的全部尝试:http://jsfiddle.net/osc9m3e7/4/

我确定的那部分是不正确的:

$('#setdata').click(function() {
Highcharts.mapChart.series[0].setData(data1);
});

我很感激让我走上正确轨道的任何提示。

2 个答案:

答案 0 :(得分:0)

ewolden在评论中回答。我的问题是我没有命名图表,因此无法使用setData操作它。现在的工作示例如下:http://jsfiddle.net/osc9m3e7/7/

var AccessMap = Highcharts.mapChart('container', {
...
$('#setdata').click(function() {
AccessMap.series[0].setData(data2);
});

答案 1 :(得分:0)

您可能已经注意到每次设置新数据时国家/地区的边界越来越厚。发生这种情况是因为数据对象未被复制但直接使用,因此会被修改。要复制特定对象,您可以使用例如slice()函数。您可以在下面找到一个示例,其中数据集之间的切换可以正常工作。

API参考:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice

例:
http://jsfiddle.net/4ub0z408/