2

请问有没有可能在谷歌折线图中混合(隐藏)一条线?

我们有许多带有多个关闭数据值系列的折线图,我的老板要求我添加一种隐藏系列的方法(最好用鼠标单击线条或图例)。

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

在此处输入图像描述

<!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>
4

0 回答 0