Как обновить Chart. js в соответствии с опцией, выбранной из моего раскрывающегося списка? - PullRequest
Новая
       4

Как обновить Chart. js в соответствии с опцией, выбранной из моего раскрывающегося списка?

0 голосов
/ 06 апреля 2020

Я пытаюсь обновить свой график на основе опции, выбранной в раскрывающемся списке.

Это мой 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();

Таким образом, если выбран вариант «Луис», график должен будет обновляться с учетом информации, соответствующей «Луису» (см. 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;
 }

Логика c - это если опция не равна 'All', тогда myChart.data.labels = "Luis"; и myChart.data.datasets [0] .data = "2";

Как я могу go вернуться через мой массив пользователей и заказов? Точно в пользователе указаны все имена операторов, и по порядку соответствуют количества выполненных заказов.

Не могли бы вы мне помочь решить эту проблему?

ACTUALIZADO 1

Я следую этому примеру, это то, что мне нужно.

Но бывает, что мои данные для графика получены через ajax и в этом примере массив уже определен.

Понимание этого здесь - моя путаница, когда я go перебираю свой пользовательский массив и мой массив заказов снова (см. фрагмент кода 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>
...