первый столбец в представлении (0) всегда должен быть осью X.
, поэтому вам нужно увеличить индекс отмеченных полей на 1,
как индекс первого столбца оси Y 1. 1. 1003 *
var depthArray = [0];
for (i = 0; i <= 6; ++i) {
if ($(".depth:eq(" + (i) + ")").is(":checked")) {
depthArray.push(i+1);
}
}
, но я хотел бы рекомендовать немного другой подход.
когда столбец не должен быть видимым,
мы используем вычисляемый столбец, который ничего не возвращает,
и устанавливаем цвет серии в серый.
строка все еще исчезает, но запись легенды остается и отображается «серым».
это предотвратит «прыжок» записей легенды,
и цвет каждой строки,
каждый раз, когда флажок установлен или снят.
см. Следующий рабочий фрагмент ...
// load the visualization library from Google and set a listener
google.load("visualization", "1", {
packages: ["corechart"]
});
google.setOnLoadCallback(drawChart);
function drawChart() {
// this new DataTable object holds all the data
var data = new google.visualization.arrayToDataTable(
[
["Time", "10 Feet", "15 Feet", "20 Feet", "25 Feet", "30 Feet", "35 Feet"],
["5min", 1, 2, 3, 4, 5, 6],
["7min", 1, 2, 4, 6, 8, 10],
["8min", 1, 3, 6, 9, 12, 15]
]
);
// this view can select a subset of the data at a time
var view = new google.visualization.DataView(data);
// set chart options
var options = {
title: 'No Decompression Limits',
vAxis: {
title: 'GROUP DESIGNATOIN',
titleTextStyle: {
color: '#333'
},
ticks: [{
v: 1,
f: 'A (1)'
}, {
v: 2,
f: 'B (2)'
}, {
v: 3,
f: 'C (3)'
}, {
v: 4,
f: 'D (4)'
}, {
v: 5,
f: 'E (5)'
}, {
v: 6,
f: 'F (6)'
}, {
v: 7,
f: 'G (7)'
}, {
v: 8,
f: 'H (8)'
}, {
v: 9,
f: 'I (9)'
}, {
v: 10,
f: 'J (10)'
}, {
v: 11,
f: 'K (11)'
}, {
v: 12,
f: 'L (12)'
}, {
v: 13,
f: 'M (13)'
}, {
v: 14,
f: 'N (14)'
}, {
v: 15,
f: 'O (15)'
}, {
v: 16,
f: 'Decompress'
}]
},
hAxis: {
title: 'TIME (mins)',
minValue: 10,
direction: 1,
textStyle: {
fontSize: 14
},
scaleType: 'log'
},
orientation: 'horizontal',
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
$('.depth').change(function() {
options.series = {};
var depthArray = [0];
$.each(new Array(data.getNumberOfColumns() - 1), function (i) {
if ($(".depth:eq(" + (i) + ")").is(":checked")) {
depthArray.push(i+1);
} else {
depthArray.push({
label: data.getColumnLabel(i+1),
type: data.getColumnType(i+1),
calc: function () {
return null;
},
});
options.series[i] = {
color: '#cccccc'
};
}
});
view.setColumns(depthArray);
chart.draw(view, options);
});
};
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="jquery.csv.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div id="chart_div" style="width: 100%; height: 400px;"></div>
<h3>See No-Decompression Limits For Depths</h3>
<div>
<div class="form-check form-check-inline">
<input class="form-check-input depth" type="checkbox" checked id="inlineCheckbox10" value=1>
<label class="form-check-label" for="inlineCheckbox1">≤10 feet</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input depth" type="checkbox" checked id="inlineCheckbox15" value=2>
<label class="form-check-label" for="inlineCheckbox1">≤15 feet</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input depth" type="checkbox" checked id="inlineCheckbox20" value=3>
<label class="form-check-label" for="inlineCheckbox1">≤20 feet</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input depth" type="checkbox" checked id="inlineCheckbox25" value=4>
<label class="form-check-label" for="inlineCheckbox1">≤25 feet</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input depth" type="checkbox" checked id="inlineCheckbox30" value=5>
<label class="form-check-label" for="inlineCheckbox1">≤30 feet</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input depth" type="checkbox" checked id="inlineCheckbox35" value=6>
<label class="form-check-label" for="inlineCheckbox1">≤35 feet</label>
</div>
</div>
</div>
</body>
</html>