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

我有一个Highmap，其中填充了使用getJSON获取的数据。我想要实现的是有一个按钮（或下拉菜单），允许我在两个或多个数据集之间切换

我曾多次看到这个问题以不同的方式被问到（例如），阅读答案我认为对我需要做什么有一个大致的想法，但我仍然被卡住了。FWIW我是一个完全的新手，只是想让我的同事做些事情，所以我的错误可能是根本性的，也可能只是语法问题

现在，为了向自己证明我可以让它工作，我尝试实现一个按钮，一旦点击，只需使用setData切换到第二个数据集。虽然地图显示正确，而且我知道两个JSON文件都在加载，但我无法让开关工作

以下是我的全部尝试：

我敢肯定的是，有一部分是不正确的：

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

---

如果能给我一些建议，让我走上正轨，我将不胜感激。

艾沃尔登在评论中回答。我的问题是我没有命名图表，因此无法使用setData对其进行操作。现在的工作示例如下：

---

埃沃尔登在评论中回答。我的问题是我没有命名图表，因此无法使用setData对其进行操作。现在的工作示例如下：

---

您可能已经注意到，每次设置新数据时，国家边界都变得越来越厚。之所以会发生这种情况，是因为数据对象不是复制的，而是直接使用的，所以会被修改。要复制特定对象，可以使用例如

slice（）

函数。下面是一个在数据集之间切换的示例

API参考：

示例：

---

您可能已经注意到，每次设置新数据时，国家边界都变得越来越厚。之所以会发生这种情况，是因为数据对象不是复制的，而是直接使用的，所以会被修改。要复制特定对象，可以使用例如

slice（）

函数。下面是一个在数据集之间切换的示例

API参考：

示例：

---

我用你的小提琴玩了一会儿，认为它正在加载所需的数据集。这绝对不是一个干净又好的方法，这就是为什么我不把它作为一个答案。你的代码不完整。至少，我在小提琴的任何地方都找不到你上面发布的功能。我认为主要的问题是，您没有在已创建的highchart对象上使用

setData

，而是在未安装的highchart对象上使用它。这就是为什么我在我发布的小提琴中制作了

图表

变量。感谢您的回复！我错了，我贴错了小提琴。我已经编辑了上面的问题。正如您在链接中所建议的那样，我还尝试在图表本身上使用setData，为图表指定一个变量名，但这似乎并没有解决问题。下面是一个我尝试复制的工作示例，但它实际上只使用一个数据集（然后随机更改）：我在fiddle中包含了您的第二个数据集链接并对其进行了更新：，还包含了一个在数据集之间切换的简单if/else。正如您在尝试复制的示例中所看到的，它还操作存储到变量的图表对象，即

chart

。以下内容：<代码>var图表=Highcharts.mapChart，是重要的部分。通过将

chart

作为变量进行分配，您可以操纵其内容。太好了。非常感谢！现在一切都清楚了。我用你的小提琴玩了一会儿，认为它正在加载所需的数据集。这绝对不是一个干净又好的方法，这就是为什么我不把它作为一个答案。你的代码不完整。至少，我在小提琴的任何地方都找不到你上面发布的功能。我认为主要的问题是，您没有在已创建的highchart对象上使用

setData

，而是在未安装的highchart对象上使用它。这就是为什么我在我发布的小提琴中制作了

图表

变量。感谢您的回复！我错了，我贴错了小提琴。我已经编辑了上面的问题。正如您在链接中所建议的那样，我还尝试在图表本身上使用setData，为图表指定一个变量名，但这似乎并没有解决问题。下面是一个我尝试复制的工作示例，但它实际上只使用一个数据集（然后随机更改）：我在fiddle中包含了您的第二个数据集链接并对其进行了更新：，还包含了一个在数据集之间切换的简单if/else。正如您在尝试复制的示例中所看到的，它还操作存储到变量的图表对象，即

chart

。以下内容：<代码>var图表=Highcharts.mapChart，是重要的部分。通过将

chart

作为变量进行分配，您可以操纵其内容。太好了。非常感谢！现在一切都清楚了。我已经注意到了这一点，并且正在调查为什么会发生这种情况。你的回答来得正是时候。我已经实施了修复，谢谢！我注意到了这一点，并正在调查为什么会发生这种情况。你的回答来得正是时候。我已经实施了修复，谢谢！

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