Google图表 - 单击图例键时隐藏线条

时间:2012-04-26 12:05:21

标签: google-visualization

我希望能够在点击图例中的相关键时显示/隐藏线图上的线条,这可能吗?

3 个答案:

答案 0 :(得分:3)

要隐藏GWT Visualization LineChart上的显示行,请按以下步骤操作: -

1.基于现有的DataTable对象创建DataView对象:

DataTable dataTable = DataTable.create();
DataView dataView = DataView.create(dataTable);

2.隐藏要隐藏在DataView中的曲线/线的列:

dataView.hideColumns(new int[]{<id_of_the_column>});

3.根据DataView再次绘制整个图表:

chart.draw(dataView, getOptions());

请注意,这里有一个警告,第3步是一个代价高昂的步骤,对我们来说它需要大约20-30秒。用于绘制新图表。但是如果数据不大,那么它应该可以在你的环境中进行管理。

注意:您必须使用复选框制作自己的图例,并在用户选中/取消选中复选框时执行上述操作。

答案 1 :(得分:2)

如果您不需要包含缩放和动画,那么一个选项就是使用lineWidth和areaOpacity值隐藏数据;

 <head>
    <script type='text/javascript' src='https://www.google.com/jsapi'></script>

    <script>
        function updateTable() {

            // quick data - cleaned up for this example real data sources
            data = new Array();
            data[0] = new Array();
            data[0][0] = "Day";
            data[0][1] = "Metric 1";
            data[0][2] = "Metric 2";
            data[0][3] = "Metric 3";
            data[1] = new Array();
            data[1][0] = 1;
            data[1][1] = 200;
            data[1][2] = 50;
            data[1][3] = 400;
            data[2] = new Array();
            data[2][0] = 2;
            data[2][1] = 440;
            data[2][2] = 140;
            data[2][3] = 40;
            data[3] = new Array();
            data[3][0] = 3;
            data[3][1] = 300;
            data[3][2] = 500;
            data[3][3] = 600;

            var gdata = google.visualization.arrayToDataTable(data);

            var options = {
              // title: 'kala',
              hAxis: {title: 'Days',  titleTextStyle: {color: '#333'}}
              ,vAxis: {minValue: 0}
              ,height: 300
              ,width: 600
              ,chartArea: {left: 60}
              ,lineWidth: 2
              ,series: {0:{color: 'black', areaOpacity: 0.3, lineWidth: 2}
              ,1:{color: 'red', areaOpacity: 0.3, lineWidth: 2}
              ,2:{color: 'purple', areaOpacity: 0.3, lineWidth: 2}}
            };

            var chart = new google.visualization.AreaChart(document.getElementById('my_chart'));
            chart.draw(gdata, options);

            google.visualization.events.addListener(chart, 
                'select', 
                (function (x) { return function () { AreaSelectHander(chart, gdata, options)}})(1));

    }

    function AreaSelectHander(chart, gdata, options) {
        // when ever clicked we enter here 
        // more code needed to inspect what actually was clicked, now assuming people
        // play nicely and click only lables...
        var selection = chart.getSelection();       
        var view = new google.visualization.DataView(gdata);
        console.log(options);

        // click and data index are one off
        i = selection[0].column - 1;

        // just simple reverse
        if (options.series[i].lineWidth == 0) {
            options.series[i].lineWidth = 2;
            options.series[i].areaOpacity = 0.3;
        }
        else {
            options.series[i].lineWidth = 0;
            options.series[i].areaOpacity = 0.0;            
        }

        chart.draw(gdata, options);
    }
    </script>

    <script type='text/javascript'>
        google.load('visualization', '1', {packages:['table', 'corechart']});
        google.setOnLoadCallback(updateTable);
    </script>

</head>

<body>
    <div id='my_chart'></div>
</body>

答案 2 :(得分:0)

以下代码显示护目镜折线图,并具有通过单击图例标签隐藏/显示图形线的功能。 #graph_sales_data是显示图表的div的id,sales_data_graph是包含记录的变量。

function drawChart() {
                        if (sales_data_graph.length > 1)
                        {
                            $('#graph_sales_data').show();
                            var data = new google.visualization.arrayToDataTable(sales_data_graph);

                            // Instantiate and draw our chart, passing in some options.
                            var chart = new google.visualization.ChartWrapper({
                                chartType: 'LineChart',
                                containerId: 'graph_sales_data',
                                dataTable: data,
                                colors: ['#ea6f09', '#fb250d', '#0ac9c6', '#2680be', '#575bee', '#6bd962', '#ff0000', '#000000'],
                                options: {
                                    width: 1200,
                                    height: 500,
                                    fontSize: 10,
                                    pointSize: 10
                                }
                            });

                            // create columns array
                            var columns = [0];
                            /* the series map is an array of data series
                             * "column" is the index of the data column to use for the series
                             * "roleColumns" is an array of column indices corresponding to columns with roles that are associated with this data series
                             * "display" is a boolean, set to true to make the series visible on the initial draw
                             */
                            var seriesMap = [{
                                    column: 1,
                                    roleColumns: [1],
                                    display: true
                                }, {
                                    column: 2,
                                    roleColumns: [2],
                                    display: true
                                }, {
                                    column: 3,
                                    roleColumns: [3],
                                    display: true
                                }, {
                                    column: 4,
                                    roleColumns: [4],
                                    display: true
                                }, {
                                    column: 5,
                                    roleColumns: [5],
                                    display: true
                                }, {
                                    column: 6,
                                    roleColumns: [6],
                                    display: true
                                }, {
                                    column: 7,
                                    roleColumns: [7],
                                    display: true
                                }, {
                                    column: 8,
                                    roleColumns: [8],
                                    display: true
                                }];
                            var columnsMap = {};
                            var series = [];
                            for (var i = 0; i < seriesMap.length; i++) {
                                var col = seriesMap[i].column;
                                columnsMap[col] = i;
                                // set the default series option
                                series[i] = {};
                                if (seriesMap[i].display) {
                                    // if the column is the domain column or in the default list, display the series
                                    columns.push(col);
                                }
                                else {
                                    // otherwise, hide it
                                    columns.push({
                                        label: data.getColumnLabel(col),
                                        type: data.getColumnType(col),
                                        sourceColumn: col,
                                        calc: function() {
                                            return null;
                                        }
                                    });
                                    // backup the default color (if set)
                                    if (typeof(series[i].color) !== 'undefined') {
                                        series[i].backupColor = series[i].color;
                                    }
                                    series[i].color = '#CCCCCC';
                                }
                                for (var j = 0; j < seriesMap[i].roleColumns.length; j++) {
                                    //columns.push(seriesMap[i].roleColumns[j]);
                                }
                            }

                            chart.setOption('series', series);

                            function showHideSeries() {
                                var sel = chart.getChart().getSelection();
                                // if selection length is 0, we deselected an element
                                if (sel.length > 0) {
                                    // if row is undefined, we clicked on the legend
                                    if (sel[0].row == null) {
                                        var col = sel[0].column;
                                        if (typeof(columns[col]) == 'number') {
                                            var src = columns[col];

                                            // hide the data series
                                            columns[col] = {
                                                label: data.getColumnLabel(src),
                                                type: data.getColumnType(src),
                                                sourceColumn: src,
                                                calc: function() {
                                                    return null;
                                                }
                                            };

                                            // grey out the legend entry
                                            series[columnsMap[src]].color = '#CCCCCC';
                                        }
                                        else {
                                            var src = columns[col].sourceColumn;

                                            // show the data series
                                            columns[col] = src;
                                            series[columnsMap[src]].color = null;
                                        }
                                        var view = chart.getView() || {};
                                        view.columns = columns;
                                        chart.setView(view);
                                        chart.draw();
                                    }
                                }
                            }

                            google.visualization.events.addListener(chart, 'select', showHideSeries);

                            // create a view with the default columns
                            var view = {
                                columns: columns
                            };
                            chart.draw();
                        }
                        else
                        {
                            $('#graph_sales_data').hide();
                        }
                    }