如何基于下拉列表更新Chart.js？ [英] How to update Chart.js based on dropdown list?

查看：81
本文介绍了如何基于下拉列表更新Chart.js？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

更新

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

I have added a dropdown to my chart which allows the user to select among the available operator names. I need your help so that when selecting an available operator name, the graphic is updated showing only the information of the selected operator.

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

From all my JSON response, for this example it should only show the information in a red box:

如您在图片中所见，选择Luis运算符，此图应更新并仅显示Luis运算符（他有2个工作订单处于完成状态）。

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

getChartData（）方法：

我使用ajax，基本上我正在

I use ajax, basically I'm getting the data and loading my select with the names of the available operators.

renderChart（）方法：
$
I将这些参数作为带有这些参数的参数标签和数据传递给我，我也可以使我的图表也正在配置一些可用的选项。

renderChart () method:   I am passing it as a parameter "label and data" with these parameters I can make my graph also I am configuring some available options.

select.on（'更改，函数（）：

在这里，我不了解如何根据所选选项告诉图表进行更新，必须再次调用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>

我迷路了，无法链接所选的选项和要显示的信息（更新图表）。您能告诉我如何解决吗？

更新1

我的选择 

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

通过ajax加载我的选择选项： 

 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);

有了您给我的答案，请完全按照我的<$修改我的report.js文件c $ c> function renderChart（order，user），它如下：

With the answer you have given me, modify my report.js file exactly my function renderChart(order, user) and it is as follows:

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 = $("#operator").val();
        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();
    });            

}

图形更新不正确发生错误，您可以在图像中看到它：

很明显，如果我选择全部选项，它会正确显示并显示图形，现在，如果我选择 jose，则会发生以下情况：

Obviously if I select the "All" option, it shows and graphs correctly, now if I select "jose" the following happens:

该图不符合比例尺，我知道Jose只有1个工单，比例尺最多2个。

x轴，而不是在这种情况下显示 Jose的名称，而是在显示我的选择ID（在这种情况下为6）。

请帮助我更正此部分：

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

        var option = $("#operator").val();
        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();
    });


推荐答案

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

When the selected options changes, you must not destroy the chart. All you need to do is performing the following steps.


  1. 更改 data.labels

  2. 更改唯一数据集的数据

  3. 更新图表本身

  1. Change the data.labels
  2. Change the data of the unique dataset
  3. Update the chart itself

这基本上是如下操作。

myChart.data.labels = <new labels>;
myChart.data.datasets[0].data = <new values>;
myChart.update();

以下示例说明了如何在JavaScript中完成此操作。

The following example illustrates how this can be done in JavaScript.

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

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>

这篇关于如何基于下拉列表更新Chart.js？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
PHP最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆