如何基于下拉列表更新Chart.js？

Question

更新

我已经向我的图表添加了一个下拉列表，允许用户在可用的运算符名称中进行选择。我需要您的帮助，以便在选择可用的操作员姓名时，将更新图形，仅显示所选操作员的信息。

从我所有的JSON响应中，在此示例中，它仅应在红色框中显示信息：

您可以在图像中看到，如果选择Luis运算符，此图将更新并仅显示Luis运算符（他有2个工作订单处于完成状态）。

在我用来制作图表的我的report.js文件下面。

getChartData（）方法：

我使用ajax，基本上我正在获取数据并使用可用运算符的名称加载我的选择。

renderChart（）方法：我通过这些参数将其作为参数“标签和数据”传递给我，使我的图表也可以配置一些可用选项。

select.on（'change'，function（）：] >>

这里我不明白如何根据所选的选项告诉我的图表更新，然后我将不得不再次调用renderChart方法以使用所选数据再次绘制图形，但是它不起作用，我不知道如何解决它，这就是我正在尝试的方法。

report.js

function getChartData(user) {    
    $.ajax({
         url: '/admin/reports/getChart/' + user,
        type: 'GET',
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          },
        dataType: 'json',
        success: function (response) {             
            console.log(response);
            var data = [];
            var labels = [];         

            for (var i in response.orders) {

                data.push(response.orders[i].orders_by_user);
                labels.push(response.orders[i].name);  
                $("#operator").append('<option value='+response.orders[i].id+'>'+response.orders[i].name+'</option>');    
            }   
            renderChart(data, labels);              
        },

        error: function (response) {        
            console.log(response);
        }
    });
}

function renderChart(data, labels) {
    var ctx = document.getElementById("orders").getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: labels,
            datasets: [{
                label: 'Terminadas',
                data: data,
                borderColor: 'rgba(75, 192, 192, 1)',
                backgroundColor: "#229954",
                borderWidth: 1,
                yAxisID: 'Ordenes',
                xAxisID: 'Operarios',
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    id: "Ordenes",
                    ticks: {
                        beginAtZero: true

                    },
                    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",
                }
            },
        }
    });

    function updateChart() {       
        myChart.destroy();     
        myChart = new Chart(ctx, {
            type: document.getElementById("operator").value,
            data: data
        });
    };

}

getChartData();

$('#operator').select2({
    placeholder: 'Selecciona un operario',
    tags: false              
});


 var select = $('#operator'); 
 var pElem = document.getElementById('p')           

   select.on('change', function() {                
     var item = $(this).val();               
     pElem.innerHTML = 'selectedValue: ' + item;
     var data = {
        labels: labels,
        datasets: data
     }
     var ctx = document.getElementById("orders").getContext('2d');
     var myChart = new Chart(ctx, {
          type: 'line',
          data: data
        });
 }); 
我的选择：

<select class="form-control" name="operator" id="operator">
    <option></option>                                                            
</select> 
我迷上了试图链接所选选项和要显示的信息（更新图表）的过程。您能告诉我如何解决吗？

更新，我在图表中添加了一个下拉列表，允许用户在可用的运算符名称中进行选择。我需要您的帮助，以便在选择可用的操作员名称时，图形为...

Answer 1

当所选选项更改时，您不得破坏图表。您需要做的就是执行以下步骤。