谷歌图表 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) {

    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">&#8804;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">&#8804;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">&#8804;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">&#8804;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">&#8804;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">&#8804;35 feet</label>

            </div>

        </div>

    </div>

</body>

</html>