【发布时间】：2020-07-16 01:16:00
【问题描述】：
更新
我在我的图表中添加了一个下拉菜单，它允许用户在可用的操作员名称中进行选择。 我需要您的帮助，以便在选择可用操作员名称时，更新图形，仅显示所选操作员的信息。
从我所有的 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>
我在尝试链接所选选项和要显示的信息时迷路了（更新图表）。你能告诉我如何解决这个问题吗？
更新 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文件，就是我的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();
});
}
图表更新不正确，出现错误，您可以在图片中看到：
显然，如果我选择“全部”选项，它会正确显示和绘制图表，现在如果我选择“jose”，则会发生以下情况：
图表不尊重规模，我知道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();
});
【问题讨论】：
-
能否请您查看 select.on ('change', function () 我正在尝试更新图表时所选选项不起作用
标签： php ajax laravel charts chart.js