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

当我点击按钮时，我在图表的顶部得到错误“this.Ca.RZ不是函数”。这里出了点问题，但我没有意识到问题所在。

Answer 1

来自google docs Annotation Chart：

hideDataColumns（columnIndexes）隐藏图表中指定的数据系列。接受一个参数，可以是数字或数字数组，其中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()。

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

当我尝试使用hideColumns时，Google可视化错误“this.Ca.RZ不是函数”

1 个答案: