#javascript #highcharts
#javascript #highcharts
Вопрос:
Я новичок в JS и пытаюсь обновить диаграмму розы ветров Highcharts на основе выбора временного диапазона из трех выпадающих списков: год, месяц и неделя. Я не уверен, что это лучший способ добиться этого для динамического обновления диаграммы (будет ли диаграмма правильно перезагружаться при изменении выбора?)… но идея заключается в том, что пользователь выбирает эти три значения для динамического создания основной строки пути url, которая будет использоваться для локального анализа файла json и обновления диаграммы.
Мои файлы json структурированы следующим образом:
mydata /
--- 2018 /
------- 2018_mean.json
------- january /
--------------january_mean.json
--------------week1_mean.json
--------------week2_mean.json
--------------week3_mean.json
--------------week4_mean.json
--- february /
--------------february_mean.json
--------------week5_mean.json
--------------week6_mean.json
--------------week7_mean.json
--- march /
-------------- ...
...
Итак, идея состоит в том, чтобы создать локальный URL-путь на основе значений из трех выпадающих фильтров, чтобы, например, если кто-то выбирает 2020 год в году, none в месяце и none в неделе, URL-путь должен вернуться 'mydata/2020/2020_mean.json'
. В противном случае, если пользователь выберет 2020, январь и ни одного для недели, он должен вернуться 'mydata/2020/january/january_mean.json'
. В противном случае, если пользователь выберет 2020 год, январь и Неделю3, он должен вернуться 'mydata/2020/january/week3_mean.json'
.
Еще один трюк, я использую Django и извлекаю файл json из локального статического файла, и скрипт в html считывает его как таковой : fetch("{% static 'mylocalfile.json' %}")
. Итак, как мне отредактировать эту строку, чтобы динамически передавать основной URL-адрес вместо ‘mylocalfile.json’?
Наконец, я хотел бы использовать разделенный выпадающий список, чтобы по умолчанию в выпадающих списках отображался текущий год, нет для месяца и нет для недели, т.е. выборка 'mydata/2021/2021_mean.json'
.
Будет ли это лучшим способом динамического обновления диаграммы?
Большое спасибо за вашу помощь!
Комментарии:
1. Привет @Joss, ваша реализация должна зависеть от объема данных. Вы можете подумать, не эффективнее ли загружать все данные сразу и присоединять к диаграмме только выбранную часть. Если вам нужна помощь в построении пути, пожалуйста, предоставьте мне какой-нибудь минимальный живой пример с выбором. Вы можете начать с: jsfiddle.net/BlackLabel/nf51wprg
2. Большое спасибо! Вот ссылка на JSFiddle с комментариями: jsfiddle.net/ssoj_tellig/zo85r30x/10
3. Здравствуйте, пожалуйста, проверьте этот пример: jsfiddle.net/BlackLabel/1ytfob8a это то, что вы ищете?
4. Блестяще — это идеально! Большое спасибо 🙂