ОБНОВЛЕНО
Я добавил раскрывающийся список на свой график , который позволяет пользователю выбирать среди доступных имен операторов. Мне нужна ваша помощь, чтобы при выборе доступного имени оператора график c обновлялся, показывая только информацию о выбранном операторе.
Из всех моих ответов JSON, для этого примера он должен показывать информацию только в красном поле:
As Вы можете видеть на изображении , если я выберу оператора Луиса, этот график должен обновить и показать мне только оператора Луиса (у него 2 рабочих задания в готовом состоянии).
Ниже мой отчет. js файл, который я использую для построения графика.
getChartData () метод:
Я использую ajax, в основном Я получаю данные и загружаю свой выбор с именами доступных операторов.
renderChart () метод: Я передаю его как параметр «метка и данные» с этими параметрами Я могу сделать свой график также я настраиваю некоторые доступные параметры.
select.on ('change', funct ion ():
здесь я не понимаю, как сказать моей диаграмме обновляться в зависимости от выбранной опции, тогда мне придется снова вызывать метод renderChart для повторного построения графика с выбранным параметром данные, но это не работает, я не знаю, как решить, это то, что я пытаюсь.
отчет. 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);
С ответом, который вы дали мне, измените мой отчет. js файл точно мой function renderChart(order, user) и это выглядит следующим образом:
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();
});
}
График обновлен неправильно, возникает ошибка, вы можете увидеть это на изображении:
Очевидно, что если я выберу опцию «Все», она будет отображаться и отображать графики правильно, теперь, если я выберу «Хосе», произойдет следующее:
График не соблюдайте масштаб, я знаю, что у Хосе есть только 1 рабочий заказ и до 2 в масштабе.
На оси х вместо того, чтобы показывать мне имя в этом случае "Хосе "показывает мне идентификатор выбора, который в данном случае равен 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();
});