如何根据下拉列表更新 Chart.js? [英] How to update Chart.js based on dropdown list?
问题描述
更新
我在我的图表中添加了一个下拉菜单，它允许用户在可用的操作员名称中进行选择.我需要您的帮助，以便在选择可用的操作员名称时，更新图形，仅显示所选操作员的信息.
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 个工作订单处于完成状态).
As you can see in the image, if I select the Luis operator, this graph should update and show me only the Luis operator (he has 2 work orders in finished state).
在我用来制作图表的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() 方法:我用这些参数将它作为参数标签和数据"传递我可以制作我的图表我还配置了一些可用的选项.
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('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)，如下:
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.
- 更改
data.labels - 更改唯一数据集的
data - 更新
图表本身
这基本上是这样完成的.
This is basically done as follows.
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屋！
