javascript - 谷歌图表：选中复选框时隐藏列
问题描述
我试图只显示我在页面顶部的复选框上选中的列。
我有 2 个图表，第一个显示所有列，第二个应该显示我在顶部检查的列。
第二个图表是第一个图表的视图。
我正在使用前两个复选框：玻利维亚和厄瓜多尔
我使用函数 setColumns() 来选择要显示的哪个列，但我不能在其上使用空值。
<!DOCTYPE html>
<html lang="es" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body onload="myFunction()">
Bolivia<input type="checkbox" id="check1" class="check" name="series" value="1" checked="true" onchange="myFunction()" /><br>
Ecuador<input type="checkbox" id="check2" class="check" name="series" value="2" checked="true" onchange="myFunction()" /><br>
Madagascar<input type="checkbox" id="check3" class="check" name="series" value="3" checked="true" onchange="myFunction()" /><br>
Papua New Guinea<input type="checkbox" id="check4" class="check" name="series" value="4" checked="true" onchange="myFunction()" /><br>
Rwanda<input type="checkbox" id="check5" class="check" name="series" value="5" checked="true" onchange="myFunction()" /><br>
Average<input type="checkbox" id="check6" class="check" name="series" value="6" checked="true" onchange="myFunction()" /><br>
<script type="text/javascript">
function myFunction(){
var valCheck1 = parseInt(document.getElementById("check1").value);
var valCheck2 = parseInt(document.getElementById("check2").value);
var valCheck3 = parseInt(document.getElementById("check3").value);
var valCheck4 = parseInt(document.getElementById("check4").value);
var valCheck5 = parseInt(document.getElementById("check5").value);
var valCheck6 = parseInt(document.getElementById("check6").value);
var check1 = document.getElementById("check1");
var check2 = document.getElementById("check2");
var check3 = document.getElementById("check3");
var check4 = document.getElementById("check4");
var check5 = document.getElementById("check5");
var check6 = document.getElementById("check6");
if (check1.checked == 1) {
var salidaCheck1 = valCheck1;
}else{
var salidaCheck1 = 0;
}
if (check2.checked == 1) {
var salidaCheck2 = valCheck2;
}else{
var salidaCheck2 = 0;
}
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawVisualization);
function drawVisualization() {
// Some raw data (not necessarily accurate)
var data = google.visualization.arrayToDataTable([
['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua New Guinea', 'Rwanda', 'Average'],
['2004/05', 165, 938, 522, 998, 450, 614.6],
['2005/06', 135, 1120, 599, 1268, 288, 682],
['2006/07', 157, 1167, 587, 807, 397, 623],
['2007/08', 139, 1110, 615, 968, 215, 609.4],
['2008/09', 136, 691, 629, 1026, 366, 569.6]
]);
var options = {
title : 'Monthly Coffee Production by Country',
vAxis: {title: 'Cups'},
hAxis: {title: 'Month'},
seriesType: 'bars',
lineWidth: 5,
bar: {1: "95%",2: "95%"},
series: {5: {type: 'line'}}
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
// create view and hide unwanted columns as before
var chartview2 = new google.visualization.DataView(data);
chartview2.setColumns([ 0,salidaCheck1,salidaCheck2 ]);
var viewOptions = {
title : 'Monthly Coffee Production by Country',
vAxis: {title: 'Cups'},
hAxis: {title: 'Month'},
seriesType: 'bars',
lineWidth: 5,
bar: {1: "95%",2: "95%"},
series: {5: {type: 'line'}}
}
// make a copy of the view to create contiguous index set
var chartview2_copy = new google.visualization.DataView(chartview2);
// use the view copy with the ColumnChart
var chart2 = new google.visualization.ColumnChart(document.getElementById('chart2'));
chart2.draw(chartview2, viewOptions);
}
}
</script>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
<hr>
<div id="chart2" style="width: 900px; height: 500px;"></div>
</body>
</html>泰:)
解决方案
最后，我创建了一个没有名称的新列，并使用 setColumns 函数将该列与空列交换。
如果您运行代码片段，请在 GullPage 模式下运行它
<!DOCTYPE html>
<html lang="es" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body onload="myFunction()">
<div id="chart_div" style="width: 900px; height: 500px;"></div>
<hr>
Bolivia<input type="checkbox" id="check1" class="check" name="series" value="1" checked="true" onchange="myFunction()" /><br>
Ecuador<input type="checkbox" id="check2" class="check" name="series" value="2" checked="true" onchange="myFunction()" /><br>
Madagascar<input type="checkbox" id="check3" class="check" name="series" value="3" checked="true" onchange="myFunction()" /><br>
Papua New Guinea<input type="checkbox" id="check4" class="check" name="series" value="4" checked="true" onchange="myFunction()" /><br>
Rwanda<input type="checkbox" id="check5" class="check" name="series" value="5" checked="true" onchange="myFunction()" /><br>
Average<input type="checkbox" id="check6" class="check" name="series" value="6" checked="true" onchange="myFunction()" /><br><br>
<div id="chart2" style="width: 900px; height: 500px;"></div>
<script type="text/javascript">
function myFunction(){
var valCheck1 = parseInt(document.getElementById("check1").value);
var valCheck2 = parseInt(document.getElementById("check2").value);
var valCheck3 = parseInt(document.getElementById("check3").value);
var valCheck4 = parseInt(document.getElementById("check4").value);
var valCheck5 = parseInt(document.getElementById("check5").value);
var valCheck6 = parseInt(document.getElementById("check6").value);
var check1 = document.getElementById("check1");
var check2 = document.getElementById("check2");
var check3 = document.getElementById("check3");
var check4 = document.getElementById("check4");
var check5 = document.getElementById("check5");
var check6 = document.getElementById("check6");
var contCheck = 0;
if (check1.checked == 1) {
var salidaCheck1 = valCheck1;
contCheck = 1;
}else{
var salidaCheck1 = 7;
}
if (check2.checked == 1) {
var salidaCheck2 = valCheck2;
contCheck = 1;
}else{
var salidaCheck2 = 7;
}
if (check3.checked == 1) {
var salidaCheck3 = valCheck3;
contCheck = 1;
}else{
var salidaCheck3 = 7;
}
if (check4.checked == 1) {
var salidaCheck4 = valCheck4;
contCheck = 1;
}else{
var salidaCheck4 = 7;
}
if (check5.checked == 1) {
var salidaCheck5 = valCheck5;
contCheck = 1;
}else{
var salidaCheck5 = 7;
}
if (check6.checked == 1) {
var salidaCheck6 = valCheck6;
contCheck = 1;
}else{
var salidaCheck6 = 7;
}
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawVisualization);
function drawVisualization() {
// Some raw data (not necessarily accurate)
var data = google.visualization.arrayToDataTable([
['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua New Guinea', 'Rwanda', 'Average',''],
['2004/05', 165, 938, 522, 998, 450, 614.6,0],
['2005/06', 135, 1120, 599, 1268, 288, 682,0],
['2006/07', 157, 1167, 587, 807, 397, 623,0],
['2007/08', 139, 1110, 615, 968, 215, 609.4,0],
['2008/09', 136, 691, 629, 1026, 366, 569.6,0]
]);
var options = {
title : 'ORIGINAL',
vAxis: {title: 'Cups'},
hAxis: {title: 'Month'},
seriesType: 'bars',
lineWidth: 2,
bar: {1: "95%",2: "95%"},
series: {5: {type: 'line'}}
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
// create view and hide unwanted columns as before
var chartview2 = new google.visualization.DataView(data);
chartview2.setColumns([ 0,salidaCheck1,salidaCheck2,salidaCheck3,salidaCheck4,salidaCheck5,salidaCheck6 ]);
var viewOptions = {
title : 'VISTA',
vAxis: {title: 'Cups'},
hAxis: {title: 'Month'},
seriesType: 'bars',
lineWidth: 2,
bar: {1: "95%",2: "95%"},
series: {5: {type: 'line'}}
}
// make a copy of the view to create contiguous index set
var chartview2_copy = new google.visualization.DataView(chartview2);
// use the view copy with the ColumnChart
var chart2 = new google.visualization.ColumnChart(document.getElementById('chart2'));
chart2.draw(chartview2, viewOptions);
}
}
</script>
</body>
</html>推荐阅读
- python - OpenGL 光 - 颜色不会在一个角度平滑变化
- python-3.x - python main.py 在pycharm中转文本文件
- asp.net-core - 如何使用 Moq 模拟和期望具有 Action 委托作为参数之一的方法
- javascript - 此关键字的分配
- ios - 从 swift 访问前向声明的枚举的属性
- javascript - javascript/reactjs中具有多个参数的递归函数
- c# - FontStyle 枚举与 CheckBox.Text FontStyles 的可用 FontStyles 之间的差异
- php - Laravel 查询错误 - 调用未定义的方法 Illuminate\Database\Query\Builder::query()
- arrays - React Native：如何使用 onPress 函数从 url 数组中打开特定的 URL？
- node.js - npm 运行构建反应 js