#javascript #html #chart.js
Вопрос:
Я пытаюсь получить «метку», которая используется в наборах данных из Chart.js (версия 3.5.1) обновляйте всякий раз, когда другой
lt;опцияlt;gt;
выбирается из HTML.
Я попытался выполнить функцию в javascript, чтобы попытаться обновить эту метку, но мне это не удается, и я не могу найти в Интернете ничего, что могло бы мне помочь.
Вот мой код:
const data = { labels: ['Miami', 'Chicago', 'New York', 'Los Angeles', 'London', 'Paris'], datasets: [ { //label: genDate, data: [ 2000, 1500, 1000, 3000, 950, 600 ], backgroundColor: ['red', 'green', 'yellow', 'blue', 'orange', 'purple' ] } ] } const config = { type: 'line', data, options: { scales: { y: { beginAtZero: true } } } }; function showGraph() { var x = document.getElementById("hideButton"); var graph = document.getElementById("container"); if (graph.style.display === "none" amp;amp; x.style.display === "none") { x.style.display = "block"; graph.style.display = "block"; } } const changeMyChart = new Chart( document.getElementById('myChart'), config ); function updateTitle(chartName) { changeMyChart.config.data.datasets.label = chartName changeMyChart.update(); } lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"gt; lt;link rel="stylesheet" href="CSS/bootstrap.min.css"gt; lt;script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"gt;lt;/scriptgt; lt;div class="card w-75 mt-2"gt; lt;div class="card-header p-2 d-flex justify-content-center align-content-center"gt; lt;h2gt;Generate Sales Reportlt;/h2gt; lt;/divgt; lt;div class="card-body p-2 d-flex justify-content-center align-content-center"gt; lt;div class="form-group mr-1"gt; lt;label for="packageType" class="form-text text-white ml-4"gt;lt;bgt;Select Package Typelt;/bgt;lt;/labelgt; lt;select id="packageType" class="custom-select m-1"gt; lt;option value="0"gt;Select Package Typelt;/optiongt; lt;option value="Air" onclick="updateTitle('Air')"gt;Airlt;/optiongt; lt;OPTION value="Cruise" onclick="updateTitle('Cruise')"gt;Cruiselt;/OPTIONgt; lt;OPTION value="Ground" onclick="updateTitle('Ground')"gt;Groundlt;/OPTIONgt; lt;/selectgt; lt;/divgt; lt;div class="form-group ml-2"gt; lt;label for="year" class="form-text text-white ml-4"gt;lt;bgt;Select Yearlt;/bgt;lt;/labelgt; lt;select class="custom-select m-1" id="year"gt; lt;option value="0"gt;Select Yearlt;/optiongt; lt;option value="2022" onclick="updateTitle('2022')"gt;2022lt;/optiongt; lt;OPTION value="2021" onclick="updateTitle('2021')"gt;2021lt;/OPTIONgt; lt;OPTION value="2020" onclick="updateTitle('2020')"gt;2020lt;/OPTIONgt; lt;OPTION value="2019" onclick="updateTitle('2019')"gt;2019lt;/OPTIONgt; lt;Option value="2018" onclick="updateTitle('2018')"gt;2018lt;/Optiongt; lt;Option value="2017" onclick="updateTitle('2017')"gt;2017lt;/Optiongt; lt;Option value="2016" onclick="updateTitle('2016')"gt;2016lt;/Optiongt; lt;Option value="2015" onclick="updateTitle('2015')"gt;2015lt;/Optiongt; lt;/selectgt; lt;/divgt; lt;div class="form-group ml-2"gt; lt;label for="quarter" class="form-text text-white ml-4"gt;lt;bgt;Select Financial Quarterlt;/bgt;lt;/labelgt; lt;select class="custom-select m-1" id="quarter"gt; lt;option value="0"gt;Select Financial Quarterlt;/optiongt; lt;option value="1" onclick="updateTitle('Quarter 1')"gt;Quarter 1lt;/optiongt; lt;OPTION value="2" onclick="updateTitle('Quarter 2')"gt;Quarter 2lt;/OPTIONgt; lt;OPTION value="3" onclick="updateTitle('Quarter 3')"gt;Quarter 3lt;/OPTIONgt; lt;OPTION value="4" onclick="updateTitle('Quarter 4')"gt;Quarter 4lt;/OPTIONgt; lt;/selectgt; lt;/divgt; lt;/divgt; lt;div class="card-footer p-2 d-flex justify-content-center"gt; lt;button class="btn btn-primary" onclick="showGraph()"gt;Generate Reportlt;/buttongt; lt;/divgt; lt;/divgt; lt;div class="container bg-white" id="container" style="display: none"gt; lt;canvas id="myChart" style="margin: 50px 50px"gt;lt;/canvasgt; lt;/divgt; lt;div class="d-flex justify-content-center"gt; lt;button class="btn btn-success justify-content-center" id="hideButton" onclick="hideGraph()" style="display: none; margin-top: 25px;"gt;Hide Reportlt;/buttongt; lt;/divgt; Что я хочу знать, так это как я могу сделать так, чтобы эти ценности были похожи на мои chart.js «метка», поэтому каждый раз, когда я обновляю ее другой, на моей диаграмме отображается метка, соответствующая выбранным параметрам.
Я приношу извинения за длинный код, строки, которые наиболее важны в javascript, — это функция updateTitle, а в HTML — теги select и option.
Комментарии:
1. когда я выбираю разные варианты, диаграмма не меняется.
2. @ChrisStrickland Что ты имеешь в виду? Куда?
3. когда я запускаю ваш фрагмент кода, ничего не меняется, что бы я ни выбрал
4. @ChrisStrickland Ты говоришь о графике? Да, это мой вопрос. Я не знаю, как манипулировать этими данными. Я хочу начать с «ярлыка», оттуда, я думаю, я смогу подобрать его самостоятельно.
5. ладно, дай мне подумать. Я не уверен, что вы все правильно настроили. Настройка метки не должна быть в onclick для кнопок, она должна быть в функции обновления диаграммы.