javascript - 如何根据从我的下拉列表中选择的选项更新 Chart.js？

Question

我正在尝试根据从下拉列表中选择的选项更新我的图表。

这是我的 JSON 响应：

{
"orders": [
{
"id": 4,
"name": "Luis",
"orders_by_user": 2,
"rol": 2
},
{
"id": 6,
"name": "Jose",
"orders_by_user": 1,
"rol": 2
},
{
"id": 7,
"name": "Miguel",
"orders_by_user": 1,
"rol": 2
}
]
}

通过 ajax 我获取数据以制作图表并将选项上传到我的下拉列表。一小段代码：

success: function (response) {             
            console.log(response);
            var order = [];
            var user = [];         

            for (var i in response.orders) {

                order.push(response.orders[i].orders_by_user);
                user.push(response.orders[i].name);              
                $("#operator").append('<option value='+response.orders[i].id+'>'+response.orders[i].name+'</option>');

            }      

            renderChart(order, user);   

我的选择：

<select class="form-control" name="operator" id="operator" >
    <option>All</option>                                                            
</select>   

有了这个，我从我的下拉列表中获得了选定的文本。

    var selectOption = $('#operator');                    
    selectOption.on('change', function() {   
        var option = $("option:selected", selectOption).text();

因此，如果所选选项是“Luis”，则必须使用与“Luis”对应的信息更新图表（请参阅 JSON 响应）

这就是我尝试更新图表的方式：

function renderChart(order, user) {
    var ctx = document.getElementById("orders").getContext('2d');
    var myChart = new Chart(ctx, {
      //code...
    }); 

    //my select
    var selectOption = $('#operator');                    
    selectOption.on('change', function() {  

         var option = $("option:selected", selectOption).text();
        myChart.data.labels = option;
        if (option == 'All') {
           myChart.data.labels = user,
           myChart.data.datasets[0].data = order;
        } else {
          myChart.data.labels = option;
          myChart.data.datasets[0].data = order;
        }
        myChart.update();
    });            

}

我想我的问题在这里：

} else {
    myChart.data.labels = option;
    myChart.data.datasets[0].data = order;
 }

逻辑是如果 option 不等于 'All'，则 myChart.data.labels = "Luis"; 和 myChart.data.datasets [0] .data = "2";

我怎样才能通过我的用户和订单数组返回？ 准确的用户名是操作员的所有名称，顺序是对应的已完成订单的数量。

你能指导我解决这个问题吗？

实际操作 1

我正在关注这个例子，这是我所需要的。

但碰巧我的图表数据是通过 ajax 获得的，在这个例子中，数组已经定义了。

在这里理解这一点是我的困惑，因为我再次遍历我的用户数组和我的订单数组（参见 ajax 代码片段），正确遍历这些数组我可以将结果应用到我的 if 中，否则。

orders = [
  { name: 'Luis', orders_by_user: '2' },
  { name: 'Jose', orders_by_user: '1' },
  { name: 'Miguel', orders_by_user: '1' }
];



const myChart = new Chart(document.getElementById('orders'), {
  type: 'bar',
  data: {
    labels: orders.map(o => o.name),
    datasets: [{
      label: 'Terminadas',
      data: orders.map(o => o.orders_by_user),
      borderColor: 'rgba(75, 192, 192, 1)',
      backgroundColor: "#229954",
      borderWidth: 1,
      yAxisID: 'Ordenes',
      xAxisID: 'Operarios',
    }]
  },
  options: {
    scales: {
      yAxes: [{
        id: "Ordenes",
        ticks: {
          beginAtZero: true,
          stepSize: 1
        },
        scaleLabel: {
          display: true,
          labelString: 'Ordenes'
        }
      }],
      xAxes: [{
        id: "Operarios",
        scaleLabel: {
          display: true,
          labelString: 'Operarios'
        }

      }],
    },
    title: {
      display: true,
      text: "Ordenes en estado terminado"
    },
    legend: {
      display: true,
      position: 'bottom',
      labels: {
        fontColor: "#17202A",
      }
    },
  }
});

orders.forEach(o => {
  const opt = document.createElement('option');
  opt.value = o.name;
  opt.appendChild(document.createTextNode(o.name));
  document.getElementById('operator').appendChild(opt);
});

function refreshChart(name) {
  myChart.data.labels = [name];
  if (name == 'All') {
     myChart.data.labels = orders.map(o => o.name),
     myChart.data.datasets[0].data = orders.map(o => o.orders_by_user);
  } else {
    myChart.data.labels = [name];
    myChart.data.datasets[0].data = orders.find(o => o.name == name).orders_by_user;
  }
  myChart.update();
}

Operarios:
<select id="operator" onchange="refreshChart(this.value)">
    <option>All</option>                                                            
</select> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="orders" height="90"></canvas>

标签： javascriptphpjquerylaravelchart.js