谷歌图表 setColumns 行为不正确

Question

我一直在尝试使用谷歌图表来显示一些与水肺潜水相关的数据（在下面的代码中没有使用实际数据。实际数据非常庞大）。页面加载时数据正确显示。但是当我使用复选框来设置列（隐藏或显示列）时，结果很奇怪。图表将隐藏错误的列。

我附上了代码。如果您运行它，您将看到正确显示的数据。但是，当您尝试使用复选框打开和关闭任何列时，您会意识到它隐藏/显示了错误的列。（第一栏除外）

// 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)'

                }, {

Answer 1

视图中的第一列 (0) 应该始终是 x 轴。所以你需要将复选框的索引增加 1，因为第一个 y 轴列的索引是 1。var depthArray = [0];for (i = 0; i <= 6; ++i) {&nbsp; &nbsp; if ($(".depth:eq(" + (i) + ")").is(":checked")) {&nbsp; &nbsp; &nbsp; &nbsp; depthArray.push(i+1);&nbsp; &nbsp; }}但我想推荐一种稍微不同的方法。当该列不可见时，我们使用一个不返回任何内容的计算列，并将系列颜色设置为灰色。该行仍然消失，但图例条目仍然存在并显示为“灰色”。这将防止图例条目“跳跃”，并且 每次选中/取消选中一个框时，每行的颜色都会发生变化。请参阅以下工作片段...// load the visualization library from Google and set a listener&nbsp; &nbsp; google.load("visualization", "1", {&nbsp; &nbsp; &nbsp; &nbsp; packages: ["corechart"]&nbsp; &nbsp; });&nbsp; &nbsp; google.setOnLoadCallback(drawChart);&nbsp; &nbsp; function drawChart() {&nbsp; &nbsp; &nbsp; &nbsp; // this new DataTable object holds all the data&nbsp; &nbsp; &nbsp; &nbsp; var data = new google.visualization.arrayToDataTable(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ["Time", "10 Feet", "15 Feet", "20 Feet", "25 Feet", "30 Feet", "35 Feet"],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ["5min", 1, 2, 3, 4, 5, 6],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ["7min", 1, 2, 4, 6, 8, 10],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ["8min", 1, 3, 6, 9, 12, 15]&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ]&nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; &nbsp; &nbsp; // this view can select a subset of the data at a time&nbsp; &nbsp; &nbsp; &nbsp; var view = new google.visualization.DataView(data);&nbsp; &nbsp; &nbsp; &nbsp; // set chart options&nbsp; &nbsp; &nbsp; &nbsp; var options = {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; title: 'No Decompression Limits',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; vAxis: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; title: 'GROUP DESIGNATOIN',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; titleTextStyle: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color: '#333'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ticks: [{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; v: 1,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; f: 'A (1)'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }, {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; v: 2,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; f: 'B (2)'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }, {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; v: 3,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; f: 'C (3)'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }, {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; v: 4,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; f: 'D (4)'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }, {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; v: 5,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; f: 'E (5)'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }, {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; v: 6,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; f: 'F (6)'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }, {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; v: 7,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; f: 'G (7)'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }, {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; v: 8,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; f: 'H (8)'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }, {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; v: 9,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; f: 'I (9)'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }, {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; v: 10,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; f: 'J (10)'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }, {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; v: 11,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; f: 'K (11)'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }, {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; v: 12,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; f: 'L (12)'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }, {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; v: 13,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; f: 'M (13)'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }, {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; v: 14,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; f: 'N (14)'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }, {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; v: 15,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; f: 'O (15)'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }, {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; v: 16,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; f: 'Decompress'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }]&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; hAxis: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; title: 'TIME (mins)',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; minValue: 10,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; direction: 1,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; textStyle: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fontSize: 14&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; scaleType: 'log'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; orientation: 'horizontal',&nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; &nbsp; &nbsp; var chart = new google.visualization.LineChart(document.getElementById('chart_div'));&nbsp; &nbsp; &nbsp; &nbsp; chart.draw(data, options);&nbsp; &nbsp; &nbsp; &nbsp; $('.depth').change(function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; options.series = {};&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var depthArray = [0];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $.each(new Array(data.getNumberOfColumns() - 1), function (i) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if ($(".depth:eq(" + (i) + ")").is(":checked")) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; depthArray.push(i+1);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; depthArray.push({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label: data.getColumnLabel(i+1),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: data.getColumnType(i+1),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; calc: function () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return null;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; options.series[i] = {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color: '#cccccc'&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; view.setColumns(depthArray);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; chart.draw(view, options);&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; };<!DOCTYPE html><html><head>&nbsp; &nbsp; <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>&nbsp; &nbsp; <script src="jquery.csv.min.js"></script>&nbsp; &nbsp; <script type="text/javascript" src="https://www.google.com/jsapi"></script>&nbsp; &nbsp; <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>&nbsp; &nbsp; <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>&nbsp; &nbsp; <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>&nbsp; &nbsp; <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>&nbsp; &nbsp; <div class="container">&nbsp; &nbsp; &nbsp; &nbsp; <div id="chart_div" style="width: 100%; height: 400px;"></div>&nbsp; &nbsp; &nbsp; &nbsp; <h3>See No-Decompression Limits For Depths</h3>&nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="form-check form-check-inline">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input class="form-check-input depth" type="checkbox" checked id="inlineCheckbox10" value=1>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label class="form-check-label" for="inlineCheckbox1">&#8804;10 feet</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="form-check form-check-inline">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input class="form-check-input depth" type="checkbox" checked id="inlineCheckbox15" value=2>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label class="form-check-label" for="inlineCheckbox1">&#8804;15 feet</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="form-check form-check-inline">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input class="form-check-input depth" type="checkbox" checked id="inlineCheckbox20" value=3>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label class="form-check-label" for="inlineCheckbox1">&#8804;20 feet</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="form-check form-check-inline">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input class="form-check-input depth" type="checkbox" checked id="inlineCheckbox25" value=4>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label class="form-check-label" for="inlineCheckbox1">&#8804;25 feet</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="form-check form-check-inline">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input class="form-check-input depth" type="checkbox" checked id="inlineCheckbox30" value=5>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label class="form-check-label" for="inlineCheckbox1">&#8804;30 feet</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="form-check form-check-inline">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input class="form-check-input depth" type="checkbox" checked id="inlineCheckbox35" value=6>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label class="form-check-label" for="inlineCheckbox1">&#8804;35 feet</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div></body></html>