Создайте строку пути URL из выпадающих списков для динамического обновления диаграммы Highcharts роза ветров

#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. Блестяще — это идеально! Большое спасибо 🙂