Как я могу переключаться между наборами данных JSON в HighMaps, используя setData?

Question

Как я могу переключаться между наборами данных JSON в HighMaps, используя setData?

1

У меня есть Highmap, который заполняется данными, полученными с помощью getJSON. То, что я хочу достичь, - это кнопка (или выпадающее меню), которая позволяет мне переключаться между двумя или более наборами данных.

Я видел этот вопрос несколько раз по-разному (например, этот), и, читая ответы, у меня есть общее представление о том, что мне нужно делать, но я остаюсь застрявшим. FWIW Я полный новичок, просто пытающийся заставить что-то работать для моих коллег, поэтому моя ошибка может быть фундаментальной или может быть просто синтаксисом.

Теперь, чтобы доказать себе, что я могу сделать это, я попытался реализовать кнопку, которая после щелчка просто переключится на второй набор данных, используя setData. Пока карта отображается правильно, и я знаю, что оба файла JSON загружаются, я не могу заставить коммутатор работать.

Вот моя попытка полностью: http://jsfiddle.net/osc9m3e7/4/

И часть, которая, я уверен, некорректна:

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

Я был бы признателен за любые советы, которые помогут мне на правильном пути.

Moss 12 сен. 2017, в 14:43

Источник

0

Я немного поиграл с твоей скрипкой и думаю, что она загружается с любым набором данных. Это ни в коем случае не чистый и хороший способ сделать это, поэтому я не публикую это как ответ. jsfiddle.net/osc9m3e7/2 . Ваш код не был завершен в скрипке. По крайней мере, я не смог найти функцию, которую вы опубликовали выше, нигде в скрипке. Я думаю, что основная проблема заключается в том, что вы не используете setData для созданного вами объекта старшей диаграммы, а вместо этого используете его для неинициализированного объекта старшей диаграммы. Вот почему я сделал переменную chart в скрипте, которую я разместил.
ewolden 12 сен. 2017, в 12:59
0

Спасибо за ответ! Моя ошибка, я выложил не ту скрипку. Я редактировал вопрос выше. Я также попытался использовать setData на самой диаграмме, дав диаграмме имя переменной, как вы предлагаете в своей ссылке, но это, похоже, не решило проблему.
Moss 12 сен. 2017, в 13:08
0

Вот рабочий пример, который я пытался воспроизвести, но он действительно использует только один набор данных (который затем случайным образом изменяется): jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/…
Moss 12 сен. 2017, в 13:13
0

Я включил вашу вторую ссылку на набор данных в свою скрипку и обновил ее: jsfiddle.net/osc9m3e7/5 , а также включил простой if / else для переключения между наборами данных. Как видно из примера, который вы пытаетесь воспроизвести, он также манипулирует объектом диаграммы, хранящимся в переменной, а именно chart . Последующий; var chart = Highcharts.mapChart , является важной частью. Используя chart как переменную, вы можете манипулировать ее содержимым.
ewolden 12 сен. 2017, в 13:16
0

Отлично. Большое спасибо! Теперь все ясно.
Moss 12 сен. 2017, в 13:19

Показать ещё 3 комментария

Теги:

javascript

json

highcharts

highmaps

2 ответа

0

Ответил ewolden в комментариях. Моя проблема заключалась в том, что я не называл диаграмму и поэтому не мог манипулировать ею с помощью setData. Рабочий пример представлен здесь: http://jsfiddle.net/osc9m3e7/7/

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

Moss 12 сен. 2017, в 12:03

Ещё вопросы

Я немного поиграл с твоей скрипкой и думаю, что она загружается с любым набором данных. Это ни в коем случае не чистый и хороший способ сделать это, поэтому я не публикую это как ответ. jsfiddle.net/osc9m3e7/2 . Ваш код не был завершен в скрипке. По крайней мере, я не смог найти функцию, которую вы опубликовали выше, нигде в скрипке. Я думаю, что основная проблема заключается в том, что вы не используете setData для созданного вами объекта старшей диаграммы, а вместо этого используете его для неинициализированного объекта старшей диаграммы. Вот почему я сделал переменную chart в скрипте, которую я разместил.
Спасибо за ответ! Моя ошибка, я выложил не ту скрипку. Я редактировал вопрос выше. Я также попытался использовать setData на самой диаграмме, дав диаграмме имя переменной, как вы предлагаете в своей ссылке, но это, похоже, не решило проблему.
Вот рабочий пример, который я пытался воспроизвести, но он действительно использует только один набор данных (который затем случайным образом изменяется): jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/…
Я включил вашу вторую ссылку на набор данных в свою скрипку и обновил ее: jsfiddle.net/osc9m3e7/5 , а также включил простой if / else для переключения между наборами данных. Как видно из примера, который вы пытаетесь воспроизвести, он также манипулирует объектом диаграммы, хранящимся в переменной, а именно chart . Последующий; var chart = Highcharts.mapChart , является важной частью. Используя chart как переменную, вы можете манипулировать ее содержимым.
Отлично. Большое спасибо! Теперь все ясно.

pawel_d · Accepted Answer · 2017-09-14T09-52-00.000Z

Вы, наверное, заметили, как границы стран становятся все толще при каждом установлении новых данных. Это происходит потому, что объект данных не копируется, а используется напрямую, поэтому он изменяется. Чтобы скопировать определенный объект, вы можете использовать, например, функцию slice(). Ниже вы можете найти пример, где переключение между наборами данных работает так, как должно.

Справочник по API:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice

Пример:
http://jsfiddle.net/4ub0z408/

Я заметил это и расследовал, почему это происходит. Ваш ответ прибыл в идеальное время. Я реализовал исправление, спасибо!