在Google图表中隐藏一行(又名系列)

时间:2013-06-04 14:58:07

标签: charts interactive google-visualization linechart

是否有可能在Google Line Chart中混合(隐藏)一行?

我们有许多折线图,其中包含多个系列的近似数据值,我的老板要求我添加隐藏系列的方法(最好用鼠标点击线条或图例)。

我在下面的一个非常简单的测试用例中添加了一个select事件监听器(只需在浏览器中打开它就可以了),但我不知道下一步该怎么做:

enter image description here

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart']}]}"></script>
<script type="text/javascript">

        var data = {"L_B8_ACLR_50_0_QPSK_1_H":{"rows":[
        {"c":[{"v":"UTRA_1_DOWN"},{"v":-42.9},{"v":-42.4},{"v":-80},{"v":-35}]},
        {"c":[{"v":"E-UTRA_1_DOWN"},{"v":-49.4},{"v":-39.9},{"v":-80},{"v":-32}]},
        {"c":[{"v":"E-UTRA_1_UP"},{"v":-48.9},{"v":-48.6},{"v":-80},{"v":-32}]},
        {"c":[{"v":"UTRA_1_UP"},{"v":-49.5},{"v":-49.4},{"v":-80},{"v":-35}]},
        {"c":[{"v":"UTRA_2_UP"},{"v":-58.9},{"v":-58.9},{"v":-80},{"v":-38}]}],

        "cols":[{"p":{"role":"domain"},"label":"MEASUREMENT","type":"string"},
        {"p":{"role":"data"},"label":"Row A","type":"number"},
        {"p":{"role":"data"},"label":"Row B","type":"number"},
        {"p":{"role":"interval"},"label":"LSL","type":"number"},
        {"p":{"role":"interval"},"label":"USL","type":"number"}]}};

        function drawCharts() {
                for (var csv in data) {
                        var x = new google.visualization.DataTable(data[csv]);

                        var options = {
                                title: csv,
                                width: 800,
                                height: 600
                        };

                        var chart = new google.visualization.LineChart(document.getElementById(csv));
                        google.visualization.events.addListener(chart, 'select', selectHandler);
                        chart.draw(x, options);
                }
        }

        function selectHandler(e) {
            alert('How to hide a row in the chart?');
        }


        $(function() {
                google.setOnLoadCallback(drawCharts);
        });

</script>
</head>
<body>
<div id="L_B8_ACLR_50_0_QPSK_1_H"></div>
</body>
</html>

0 个答案:

没有答案