Блог

Главная - Вопросы по программированию - Обновление Chart.js Наборы данных — Массив не инициализируется повторно (Jquery / PHP)

Обновление Chart.js Наборы данных — Массив не инициализируется повторно (Jquery / PHP)

#php #jquery #chart.js

Вопрос:

Я использую Chart.js (v 3.3.2) для отображения гистограммы (MyChart) с выпадающим фильтром. У меня есть прослушиватель событий для моего выпадающего списка, чтобы обновить запрос PHP/SQL для получения правильных данных — это отлично работает.

Но мой график по-прежнему отображает старые данные после обновления (с отключением кэша). Функция ajax выводит сообщение правильно. Следуя chart.js документы по обновлению наборов данных :: Обновление диаграмм

Я объявляю chart, label, data в параметрах моей ajax: success функции.

В моей success функции:

 success: function (chart, label, data) {
      myChart.data.labels.push(label);              //Push the labels for chart
      myChart.data.datasets.forEach((dataset) => {  //Push data for each dataset
            dataset.data.push(data); });
                console.log(myChart.data.labels);  // Log new labels
                console.log(myChart.data.datasets);// Log new array
            myChart.update();                      // Update my chart
}

Я смотрю на ответ из моего файла выборки PHP, и правильные данные можно увидеть в инспекторе. Но когда я смотрю на данные в своем журнале консоли, я все еще вижу старые данные.

Комментарии:

1. Пожалуйста, не удаляйте вопросы только для того, чтобы задать их снова.

2. Итак, вы удалили свой вопрос по решению сообщества, а затем неправильно отнеслись к голосованию, опубликовав его снова? И вы теперь позволяете другим пользователям снова угадывать все то, что было угадано уже вчера? Тебе нравится так к этому относиться?

3. Во-первых, это не служба отладки, поэтому логика подсказывает, что вы должны дважды проверить свои намерения и провести исследование на месте. Если бы единственное исследование состояло в том, чтобы узнать, что повторяющееся предложение не подходит, но что-то еще, это показывает очень мало усилий. У меня нет морального духа по этому поводу, но, возможно, это может сделать вас тем, что вы только что придумали, да. К которому вы добавляете, показывая свое ожидание того, что сообщество должно предложить решения для вашего продвижения. Этого не произошло. Ваш вклад должен быть направлен на развитие сообщества, а не наоборот.

4. Я могу только давать тебе советы, я не твой наставник. разделите проблему, проверьте свои ожидания, например, работает ли обновление при изменении данных. затем протестируйте только часть ajax, если данные изменяются. собери это вместе. в его нынешней форме вы спрашиваете сразу о многих вещах. на это трудно ответить. это может показаться, как будто исследование ни к чему не приводит (моя проблема в том, что я особенный, я первый, кто испытывает это, потому что все остальные кодовые заголовки, ПОЭТОМУ просто говорите о других вещах) и только бесполезные комментарии без какой-либо связи. Разбейте свою проблему на части, сосредоточьтесь сначала на одной части и устраните ее.

5. @hakre Я полностью понимаю, и я не ищу наставничества. Правда, перечитывая мой вопрос, он действительно кажется расплывчатым, но я хочу убедиться, что в вопросе содержится достаточно информации. Сейчас я обновлю свой код, чтобы сосредоточиться именно на этой проблеме.

Ответ №1:

Поэтому я подошел ко всему этому неправильно. Они select.on.change() должны были быть вызваны вне функции, и при выполнении вызывайте showSuccessRate() функцию.

Вот рабочий код:

 $(document).ready(function(){
 $('#selectTop')
          .on('change',  // When the user changed the select option, run this
            function () { 
              $('#clisuccessrate-chart').remove(); //Remove the chart canvas (because it would have loaded when document ready)
              $('div#clisuccessrate-container').append('<canvas id="clisuccessrate-chart" height="200"></canvas>'); // Add the canvas back into the html
              
              showSuccessRate(); // Call the function to draw the chart
              
          })// end onchange event

   showSuccessRate(); // Make the Bar Chart when document is ready
 
function showSuccessRate(){ // Build Bar Graph
  {var selectedOption = $('#selectTop').children('option:selected').val(); // Get the value of the option, use this value to set limit in PHP SQL Query
    $.ajax("database/cliSuccessFail-filter.php", {data: {topSelect: selectedOption} ,method:'POST', success: function (data) {
        console.log('The selected option value is: '   selectedOption); // Log the value to check response
        var mx_cli = [];
        var mx_success = [];
        var mx_failure = [];
        var mx_attempts = [];
       // ^ Declare empty array
        for (var i in data) {
          mx_cli.push(data[i].mx_cli);
          mx_success.push(data[i].mx_success);
          mx_failure.push(data[i].mx_failure);
          mx_attempts.push(data[i].mx_attempts);
        };
     // ^ Populate the arrays
      
        var csf_datasets = {
          labels: mx_cli, // Assign label 
          datasets: [{
              backgroundColor: '#007bff',
              borderColor: '#007bff',
              data: mx_success,
              label: 'Successful'
            },
            {
              backgroundColor: '#ced4da',
              borderColor: '#ced4da',
              data: mx_failure,
              label: 'Unsuccessful'
            }
          ]
        };
        var csf_options = {
          maintainAspectRatio: false,
        };

        var csf_config = {
          type: 'bar',
          data: csf_datasets, // Bind dataset 
          options: csf_options, // Bind options
        }

        var $cliSuccessRateChart = $('#clisuccessrate-chart'); // Get the canvas ID
        var myChart = new Chart($cliSuccessRateChart, csf_config); // Draw the chart
       
     } }) // END POST
}
}// END FUNCTION showSuccessRate
}); //End document.ready()
Метки: