谷歌圖表 setColumns 行為不正確
[英]Google charts setColumns not behaving right
問題描述
我一直在嘗試使用谷歌圖表來顯示一些與水肺潛水相關的數據（在下面的代碼中沒有使用實際數據。實際數據非常龐大）。 頁面加載時數據正確顯示。 但是當我使用復選框來設置列（隱藏或顯示列）時，結果很奇怪。 該圖表將隱藏錯誤的列。
我附上了代碼。 如果您運行它，您將看到正確顯示的數據。 但是當您嘗試使用復選框打開和關閉任何列時，您會發現它隱藏/顯示了錯誤的列。 （第一列除外）
// 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() { var depthArray = []; for (i = 0; i <= 6; ++i) { if ($(".depth:eq(" + (i) + ")").is(":checked")) { depthArray.push(i); } } //console.log(depthArray); 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>
1 個解決方案
解決方案1
1 已采納 2020-04-24 11:00:43
視圖中的第一列 (0) 應始終為 x 軸。
所以你需要將選中框的索引增加 1，
因為第一個 y 軸列的索引是 1。
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>
Google Charts - 最大程度地左右對齊組合圖數據
[英]Google Charts - aligning Combo Chart data maximally to left and right
為什么Google圖表無法為我顯示正確的數據？ 軸是否弄亂了？
[英]Why is Google Charts not showing the right data for me? Are the axis messed up?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.