在Google图表中显示/隐藏行,并在图例中显示灰色文本

时间:2014-05-22 12:20:47

标签: google-visualization

尝试使用图表来显示/隐藏点击线(我认为原始代码来自@asgallant),但它仅在第一次交互后才有效。

PS:是否也可以使图例中的文字变灰?

FIDDLE

google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);

    function drawChart() {
    var data = google.visualization.arrayToDataTable

    ([ 
        ['Time',    'One',  'Two',  'Three',    'Four', 'Five'],
        ['05/2013', 0, 3, 0, 0, 8],
        ['06/2013', 0, 3, 1, 0, 7],
        ['07/2013', 0, 3, 1, 0, 7],
        ['08/2013', 0, 3, 1, 0, 7],
        ['09/2013', 0, 3, 1, 0, 7],
        ['10/2013', 0, 3, 1, 0, 7],
        ['11/2013', 0, 3, 1, 0, 7],
        ['12/2013', 0, 3, 1, 0, 7],
        ['01/2014', 0, 3, 1, 0, 7],
        ['02/2014', 0, 3, 1, 0, 7],
        ['03/2014', 0, 3, 1, 0, 7],
        ['04/2014', 0, 2, 1, 0, 7],
        ['05/2014', 0, 2, 1, 0, 7]
    ]); 

    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, options);

    var columns = [];
    var series = {};
    for (var i = 0; i < data.getNumberOfColumns(); i++) {
        columns.push(i);
        if (i > 0) {
            series[i - 1] = {};
        }
    }

    var options = {
        chartArea: {width: '80%', height: '70%'},
        fontSize: ['13'],
        lineWidth: 3,
        pointSize: 10,
        series: series
    };

    google.visualization.events.addListener(chart, 'select', function () {
        var sel = chart.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 (columns[col] == col) {
                    // hide the data series
                    columns[col] = {
                        label: data.getColumnLabel(col),
                        type: data.getColumnType(col),
                        calc: function () {
                            return null;
                        }
                    };

                    // grey out the legend entry
                    series[col - 1].color = '#CCCCCC';
                }
                else {
                    // show the data series
                    columns[col] = col;
                    series[col - 1].color = null;
                }
                var view = new google.visualization.DataView(data);
                view.setColumns(columns);
                chart.draw(view, options);
            }
        }
    });

    }

0 个答案:

没有答案