javascript - 如何从我的多选框中选择一个选项并更新我的图表？
问题描述
我第一次使用 html、css、jquery 等。我已经成功实现了一个多选下拉菜单。我希望我的多选来更新我的图表。示例：如果我在多选下拉列表中单击 du 和 li，图表应仅显示这些值和图例。我应该看不到 Mrd。这是我的代码：
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type:'line',
data : {
labels: [10,20,30,40,50,60],
datasets : [{
label:'Du',
data:[
3,
6,
10,
12,
19,
25
],
backgroundColor:'pink',
borderWidth:4,
borderColor:'#777',
hoverBorderWidth:3,
hoverBorderColor:'#000'
},{
label:'Lt',
data:[
14,
28,
80,
20,
60,
45
],
backgroundColor:'yellow',
borderWidth:4,
birderColor:'black',
hoverBorderWidth:3,
hoverBorderColor:'#000'
},{
label:'Mrd',
data:[
16,
18,
28,
45,
60,
80
],
backgroundColor:'orange',
borderWidth:4,
birderColor:'black',
hoverBorderWidth:3,
hoverBorderColor:'#000'
}],
},
options:{
title:{
display:true,
text:'Defects',
fontSize:15
},
legend:{
position:'bottom',
labels:{
fontColor:'red'
}
},
layout:{
padding:{
left:50,
right:0,
top:0,
bottom:0
}
},
tooltips:{
enabled:true
}
}
});
$('#dataset').on('change', function(){
if(this.value=="1"){
myChart.data.datasets[0].data=[ 3,
6,
10,
12,
19,
25]
myChart.data.datasets[1].data = $('dataset').empty();
myChart.data.datasets[2].data = [16,
18,
28,
45,
60,
80],
myChart.update();
}else if(this.value=="2"){
myChart.data.datasets[0].data = $('dataset').empty();
myChart.data.datasets[1].data = [ 14,
28,
80,
20,
60,
45];
myChart.data.datasets[2].data = [ 16,
18,
28,
45,
60,
80
]
myChart.update();
}else if(this.value=="3"){
myChart.data.datasets[0].data=[3,
6,
10,
12,
19,
25];
myChart.data.datasets[1].data=[14,
28,
80,
20,
60,
45];
myChart.data.datasets[2].data = $('dataset').empty();
myChart.update();
}
});
$('#langOpt').multiselect({
columns:1,
placeholder:'Select Defects'
});<!DOCTYPE html>
<html lang="en">
<head>
<title>
Defect Charts
</title>
<meta name="viewport" content="width=device-width, inital-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- JS & CSS library of MultiSelect plugin -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<script src="multiselect/jquery.multiselect.js"></script>
<link rel="stylesheet" href="multiselect/jquery.multiselect.css">
</head>
<div class="container-fluid">
<div class="row">
<div class="col-4">
<div class="form-group mt-3 mb-3">
<label for="dataset">Select Factor</label>
<select class="form-control" id="dataset">
<option id="opt1" value="1">Low</option>
<option id="opt2" value="2">Medium</option>
<option id="opt3" value="3">High</option>
</select>
</div>
</div>
</div>
</div>
<div class="col-4"></div>
<div class="row">
<div class="col"></div>
<div class="col-8">
<div id="chart-wrapper">
<canvas id="myChart"></canvas>
</div>
<div class="container">
<h4>Multi-Select Defect</h4>
<div class="row">
<div class="col-4"></div>
<select name="langOpt[]" multiple id="langOpt">
<option value ="Du">Dust</option>
<option value ="Lt">Lint</option>
<option value ="Mrd">Manual Rundown</option>
</select>
</div>
</div>
</div>
</div>
</html>解决方案
你在那里做得很好。
我正在将以下代码添加到您的代码中。
$('.multiselect-container.dropdown-menu').on('change', function(){
var selectedDefect = $('.multiselect-container.dropdown-menu > li.active');
if(selectedDefect.length > 0){
selectedDefect.each(function(){
console.log($(this).find('input').val());
});
}
});
因此，使用我在 console.log 中输入的内容，您应该能够像之前在 JS 中所做的那样过滤您希望显示或不显示的数据。因此，您需要从其他选定的值中保存选定的值并过滤它们。
您还需要在我的 if 之后添加 else 以确保当没有 li 具有 class="active" 时，它会显示整个图表。
如果你希望我可以继续，但从这里你应该能够根据你所做的来赶上。
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type:'line',
data : {
labels: [10,20,30,40,50,60],
datasets : [{
label:'Du',
data:[
3,
6,
10,
12,
19,
25
],
backgroundColor:'pink',
borderWidth:4,
borderColor:'#777',
hoverBorderWidth:3,
hoverBorderColor:'#000'
},{
label:'Lt',
data:[
14,
28,
80,
20,
60,
45
],
backgroundColor:'yellow',
borderWidth:4,
birderColor:'black',
hoverBorderWidth:3,
hoverBorderColor:'#000'
},{
label:'Mrd',
data:[
16,
18,
28,
45,
60,
80
],
backgroundColor:'orange',
borderWidth:4,
birderColor:'black',
hoverBorderWidth:3,
hoverBorderColor:'#000'
}],
},
options:{
title:{
display:true,
text:'Defects',
fontSize:15
},
legend:{
position:'bottom',
labels:{
fontColor:'red'
}
},
layout:{
padding:{
left:50,
right:0,
top:0,
bottom:0
}
},
tooltips:{
enabled:true
}
}
});
$('#dataset').on('change', function(){
var selectedDefect = $('.multiselect-container.dropdown-menu > li.active');
if(selectedDefect.length > 0){
var defect = false;
var defect2 = false;
var defect3 = false;
selectedDefect.each(function(){
if($(this).find('input').val() == "Du"){
defect = true;
}
if($(this).find('input').val() == "Lt"){
defect2 = true;
}
if($(this).find('input').val() == "Mrd"){
defect3 = true;
}
});
dataSet2($('#dataset').val(), defect, defect2, defect3);
} else{
dataSet($('#dataset').val());
}
// This will add a selected attribute on the option you choose
$("#dataset").val(this.value)
.find("option[value=" + this.value +"]").attr('selected', true);
});
$('#langOpt').multiselect({
columns:1,
placeholder:'Select Defects'
});
$('.multiselect-container.dropdown-menu').on('change', function(){
var selectedDefect = $('.multiselect-container.dropdown-menu > li.active');
var factorSelected = 1; //Set basicly Low
if($('#dataset > option:selected').length > 0){
factorSelected = $('#dataset > option:selected').val();
}
if(selectedDefect.length > 0){
var defect = false;
var defect2 = false;
var defect3 = false;
selectedDefect.each(function(){
if($(this).find('input').val() == "Du"){
defect = true;
}
if($(this).find('input').val() == "Lt"){
defect2 = true;
}
if($(this).find('input').val() == "Mrd"){
defect3 = true;
}
});
dataSet2(factorSelected, defect, defect2, defect3);
//console.log($(this).find('input').val());
}
else{
dataSet(factorSelected);
}
});
function dataSet2(event, defect, defect2, defect3){
if(event=="1"){
if(defect === true){
myChart.data.datasets[0].data=[3,
6,
10,
12,
19,
25]
}
else if(defect === false){
myChart.data.datasets[0].data = $('dataset').empty();
}
if(defect2 === true){
myChart.data.datasets[1].data = $('dataset').empty();
}else if(defect2 === false){
myChart.data.datasets[1].data = $('dataset').empty();
}
if(defect3 === true){
myChart.data.datasets[2].data = [16,
18,
28,
45,
60,
80]
}else if(defect3 === false){
myChart.data.datasets[2].data = $('dataset').empty();
}
myChart.update();
}else if(event=="2"){
if(defect === true){
myChart.data.datasets[0].data = $('dataset').empty();
} else if(defect === false){
myChart.data.datasets[0].data = $('dataset').empty();
}
if(defect2 === true){
myChart.data.datasets[1].data = [ 14,
28,
80,
20,
60,
45];
} else if(defect2 === false){
myChart.data.datasets[1].data = $('dataset').empty();
}
if(defect3 === true){
myChart.data.datasets[2].data = [ 16,
18,
28,
45,
60,
80
]
} else if(defect3 === false){
myChart.data.datasets[2].data = $('dataset').empty();
}
myChart.update();
}else if(event=="3"){
if(defect === true){
myChart.data.datasets[0].data=[3,
6,
10,
12,
19,
25];
}else if(defect === false){
myChart.data.datasets[0].data = $('dataset').empty();
}
if(defect2 === true){
myChart.data.datasets[1].data=[14,
28,
80,
20,
60,
45];
}else if(defect2 === false){
myChart.data.datasets[1].data = $('dataset').empty();
}
if(defect3 === true){
myChart.data.datasets[2].data = $('dataset').empty();
}
else if(defect3 === false){
myChart.data.datasets[2].data = $('dataset').empty();
}
myChart.update();
}
}
function dataSet(event){
if(event=="1"){
myChart.data.datasets[0].data=[ 3,
6,
10,
12,
19,
25]
myChart.data.datasets[1].data = $('dataset').empty();
myChart.data.datasets[2].data = [16,
18,
28,
45,
60,
80],
myChart.update();
}else if(event=="2"){
myChart.data.datasets[0].data = $('dataset').empty();
myChart.data.datasets[1].data = [ 14,
28,
80,
20,
60,
45];
myChart.data.datasets[2].data = [ 16,
18,
28,
45,
60,
80
]
myChart.update();
}else if(event=="3"){
myChart.data.datasets[0].data=[3,
6,
10,
12,
19,
25];
myChart.data.datasets[1].data=[14,
28,
80,
20,
60,
45];
myChart.data.datasets[2].data = $('dataset').empty();
myChart.update();
}
}<!DOCTYPE html>
<html lang="en">
<head>
<title>
Defect Charts
</title>
<meta name="viewport" content="width=device-width, inital-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- JS & CSS library of MultiSelect plugin -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<script src="multiselect/jquery.multiselect.js"></script>
<link rel="stylesheet" href="multiselect/jquery.multiselect.css">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-4">
<div class="form-group mt-3 mb-3">
<label for="dataset">Select Factor</label>
<select class="form-control" id="dataset">
<option id="opt1" value="1">Low</option>
<option id="opt2" value="2">Medium</option>
<option id="opt3" value="3">High</option>
</select>
</div>
</div>
</div>
</div>
<div class="col-4"></div>
<div class="row">
<div class="col"></div>
<div class="col-8">
<div id="chart-wrapper">
<canvas id="myChart"></canvas>
</div>
<div class="container">
<h4>Multi-Select Defect</h4>
<div class="row">
<div class="col-4"></div>
<select name="langOpt[]" multiple id="langOpt">
<option value ="Du">Dust</option>
<option value ="Lt">Lint</option>
<option value ="Mrd">Manual Rundown</option>
</select>
</div>
</div>
</div>
</div>
</body>
</html>推荐阅读
- ios - Appcelerator - 在 Facebook 上分享链接
- azure-service-fabric - Azure Service Fabric 部署
- database-schema - 创建 ERD 和关系模式
- ruby-on-rails - 使用 ruby on rails 执行 SQL 命令时遇到问题
- python - 使用 cnn 的 TensorFlow 对象检测 API
- php - PHP 小时与小时之间的差异
- ruby - 使用 Ruby OpenSSL 从私钥获取椭圆曲线公钥
- swift - 自动布局遇到问题 - 为什么在堆栈视图下添加标签时会出错？
- hangfire - Hangfire - 每次代码更改时都会出现新服务器
- c# - ASP.NET Core (MVC)：无法进入控制器中的登录 HttpPost 操作