谷歌可视化 当我尝试使用隐藏列时出错"this.Ca.RZ is not a function"

Question

这是我的HTML代码：

<section class="account-chart-block box">
    <button type="button" id="hideSales"  >Hide line</button>
    <div id='chart_div' style='width: 100%; height: 500px;'></div>
</section>

脚本代码：

<script type='text/javascript' src='http://www.google.com/jsapi'></script>
<script type='text/javascript'>
    google.load('visualization', '1.1', {'packages':['annotationchart']});
    google.setOnLoadCallback(drawChart);
            function drawChart() {
                var data = new google.visualization.DataTable();
                data.addColumn('date', 'Date');
                data.addColumn('number', 'Kepler-22b mission');
                data.addColumn('string', 'Kepler title');
                data.addColumn('string', 'Kepler text');
                data.addColumn('number', 'Gliese 163 mission');
                data.addColumn('string', 'Gliese title');
                data.addColumn('string', 'Gliese text');
                data.addColumn('number', 'Hey mission');
                data.addColumn('string', 'Hey title');
                data.addColumn('string', 'Hey text');
                data.addRows([
                    [new Date(2314, 2, 15), 12400, undefined, undefined,
                                          10645, undefined, undefined, 10645, undefined, undefined],
                    [new Date(2314, 2, 16), 24045, 'Lalibertines', 'First encounter',
                                          12374, undefined, undefined,10645, undefined, undefined],
                    [new Date(2314, 2, 17), 35022, 'Lalibertines', 'They are very tall',
                                          15766, 'Gallantors', 'First Encounter', 310645, undefined, undefined],
                    [new Date(2314, 2, 18), 12284, 'Lalibertines', 'Attack on our crew!',
                                          34334, 'Gallantors', 'Statement of shared principles', undefined, undefined, undefined],
                    [new Date(2314, 2, 19), 8476, 'Lalibertines', 'Heavy casualties',
                                          66467, 'Gallantors', 'Mysteries revealed', 320645, undefined, undefined],
                    [new Date(2314, 2, 20), 0, 'Lalibertines', 'All crew lost',
                                          79463, 'Gallantors', 'Omniscience achieved', 10645, "Hey XIT", "XIT description"]
                ]);
                var view = new google.visualization.DataView(data);
                var chart = new google.visualization.AnnotationChart(document.getElementById('chart_div'));
                var options = {
                    displayAnnotationsFilter: true
                };
                chart.draw(data, options);
                var hideSal = document.getElementById("hideSales");
                hideSal.onclick = function()
                {
                    view.hideColumns([1,2,3]);
                    chart.draw(view, options);
                }
            }
</script>

我想要一个显示/隐藏图表中第一行的按钮。

使用当前代码 view.hideColumns（[1,2,3]） 应该隐藏与以下内容相关的所有内容：

data.addColumn('number', 'Kepler-22b mission');
data.addColumn('string', 'Kepler title');
data.addColumn('string', 'Kepler text');

当我点击按钮时，我收到错误"这个。Ca.RZ不是一个函数"在图表的顶部。这里有点问题，但我没有意识到问题出在哪里。

Answer 1

来自谷歌文档注释图：

隐藏数据列（列索引） 从图表中隐藏指定的数据系列。接受一个参数，该参数可以是数字或数字数组，其中 0 表示第一个数据系列，依此类推

数据系列似乎谈论的是带有数字的列。您定义了其中的三个。因此，要隐藏第一个数据系列（带有相应的注释），您必须使用索引 0。要隐藏第二个，您必须使用索引 1。

这是更改的部分（注意，我没有使用view，注释掉）：

//var view = new google.visualization.DataView(data);
var chart = new google.visualization.AnnotationChart(document.getElementById('chart_div'));
var options = {
    displayAnnotationsFilter: true
};
chart.draw(data, options);
var hideSal = document.getElementById("hideSales");
hideSal.onclick = function() {
    chart.hideDataColumns([0]);     // hide the 1st line
    //chart.hideDataColumns([1]);   // hide the 2nd line
    //chart.hideDataColumns([2]);   // hide the 3rd line
    //chart.hideDataColumns([1,2]); // hide the 2nd & 3rd line
    setTimeout(function() {
        chart.showDataColumns([0]);
    }, 3000);
}

要显示数据，您必须调用showDataColumns() 。

还有一个注意事项：当您隐藏其中一条线条时，线条的颜色会发生变化。