如何基于下拉选择框的客户筛选结果，通过Ajax更新Chart.js图表数据

I see the issue—your dropdown's change event handler is empty, and the original dataset isn't accessible outside the AJAX success callback. Here's how to fix it step by step:

Key Changes Needed #

1. Store the original dataset and chart instance in variables accessible to the change handler
2. Add logic to filter data based on the selected customer
3. Update the chart's data and trigger a refresh

Modified Code #

Updated HTML (set explicit value for "Tous" option) #

<select id="filter"> 
  <option value="all">Tous</option> 
</select> 
<canvas id="graph4Canvas" style="height: 700px; width: 100%;"></canvas>

Updated graph.js #

$(document).ready(function() { 
  // Declare variables outside AJAX to access them in the change handler
  let originalData;
  let barGraph;

  $.ajax({ 
    url: 'graph4.php', 
    type: 'GET', 
    dataType: 'json', 
    success: function(data) { 
      originalData = data; // Save full dataset for filtering later

      // Initialize the chart
      barGraph = new Chart(document.getElementById('graph4Canvas'), { 
        type: 'bar', 
        data: { 
          labels: data.map(o => o.chg_customer), 
          datasets: [{ 
            label: 'Clients', 
            data: data.map(o => o.count), 
            backgroundColor: "rgba(0, 0, 255, 0.5)", 
            yAxisID: 'Nombres', 
            xAxisID: 'Clients', 
          }] 
        }, 
        options: { 
          scales: { 
            yAxes: [{ 
              id: "Nombres", 
              ticks: { 
                beginAtZero: true, 
                stepSize: 1, 
                fontSize: 15, 
              }, 
              scaleLabel: { 
                display: true, 
                labelString: 'Nombres' 
              }, 
              gridLines: { 
                drawOnChartArea: false 
              }, 
            }], 
            xAxes: [{ 
              id: "Clients", 
              ticks: { 
                beginAtZero: true, 
                stepSize: 1, 
                fontSize: 10, 
              }, 
              scaleLabel: { 
                display: false, 
              }, 
              gridLines: { 
                drawOnChartArea: false 
              }, 
            }], 
          }, 
          title: { 
            display: false, 
          }, 
          legend: { 
            display: false, 
          }, 
        }, 
      }); 

      // Populate the dropdown with customer options
      data.forEach(o => { 
        const opt = document.createElement('option'); 
        opt.value = o.chg_customer; 
        opt.textContent = o.chg_customer; // Cleaner way to set option text
        document.getElementById('filter').appendChild(opt); 
      }); 

      // Dropdown change handler to update chart
      $("#filter").change(function() { 
        const selectedCustomer = $(this).val(); 
        let filteredData;

        // Filter data based on selection
        if (selectedCustomer === "all") {
          filteredData = originalData; // Show all entries
        } else {
          filteredData = originalData.filter(item => item.chg_customer === selectedCustomer);
        }

        // Update chart labels and dataset
        barGraph.data.labels = filteredData.map(o => o.chg_customer);
        barGraph.data.datasets[0].data = filteredData.map(o => o.count);

        // Refresh the chart to reflect changes
        barGraph.update();
      }); 
    } 
  }); 
});

Explanation #

• Accessible Variables: originalData stores the full dataset so we can filter from it every time (avoiding data loss from re-filtering already filtered data). barGraph holds the chart instance to update it later.
• Dropdown Value: We set value="all" on the "Tous" option to easily detect when all customers should be displayed.
• Filter Logic: When the dropdown changes, we either use the full dataset or filter it to only include entries matching the selected customer.
• Chart Update: After modifying the labels and data properties, calling barGraph.update() tells Chart.js to re-render the chart with the new data.

This should make your dropdown correctly update the bar chart based on the selected customer!

内容的提问来源于stack exchange，提问作者Alex Faure