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

【问题标题】：How can I switch between JSON data sets in HighMaps using setData?如何使用 setData 在 HighMaps 中的 JSON 数据集之间切换？
【发布时间】：2017-09-12 12:37:21
【问题描述】：

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

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

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

这是我的完整尝试：http://jsfiddle.net/osc9m3e7/4/

我确定的部分不正确：

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

如果有任何提示可以让我走上正轨，我将不胜感激。

【问题讨论】：

我用你的小提琴玩了一下，认为它正在加载所需的任何数据集。这绝不是一种干净而好的方法，这就是为什么我不将其发布为答案的原因。 jsfiddle.net/osc9m3e7/2 。您的代码在小提琴中并不完整。至少，我在小提琴的任何地方都找不到您在上面发布的功能。我认为主要问题是您没有在创建的 highchart 对象上使用setData，而是在未初始化的 Highchart 对象上使用它。这就是为什么我在我发布的小提琴中制作了chart 变量。
感谢您的回复！我的错误，我发布了错误的小提琴。我已经编辑了上面的问题。正如您在链接中建议的那样，我还尝试通过给图表一个变量名称来在图表本身上使用 setData，但这似乎并没有解决问题。
这是一个我试图复制的工作示例，但它实际上只使用一个数据集（然后它会随机更改）：jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/…
我在我的小提琴中包含了您的第二个数据集链接并对其进行了更新：jsfiddle.net/osc9m3e7/5，并包含一个简单的 if/else 在数据集之间切换。正如您在尝试复制的示例中所见，它还在操作存储到变量中的图表对象，即chart。以下; var chart = Highcharts.mapChart，是重要的部分。通过将chart 赋值为变量，您可以操纵其内容。
太棒了。非常感谢！现在一切都清楚了。

标签： javascript json highcharts highmaps

【解决方案1】：

您可能已经注意到，每次设置新数据时，国家/地区的边界都变得越来越粗。发生这种情况是因为数据对象没有被复制而是直接使用，所以它被修改了。要复制特定对象，您可以使用例如 slice() 函数。您可以在下面找到一个在数据集之间切换的示例。

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

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

【讨论】：

我注意到了这一点，并正在调查它发生的原因。你的回答来得正是时候。我已经实施了修复，谢谢！

【解决方案2】：

由 cmets 中的 ewolden 回答。我的问题是我没有命名图表，因此无法使用 setData 操作它。工作示例现在在这里：http://jsfiddle.net/osc9m3e7/7/

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

【讨论】：