Google图表setColumns行为不正确

问题描述 投票：1回答：1

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

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

// 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">&#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>
javascript html jquery charts google-visualization
1个回答
0
投票

视图（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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.