google 可视化 API - 从图形中隐藏数据列

Question

我想知道是否有人能够或知道我可以 hide/show 从 google 可视化 API 的 AreaChart 中加载一条线。

更详细一点，假设我们在面积图中有 8 条线，但因为它们太多了，这使得图表几乎不可读和混乱。所以我想要一段 JavaScript 代码，可以在图表已经构建并可供浏览器中的用户使用后打开或关闭这些线。

当我说 on/off 时，任何事情都会发生，改变不透明度，删除线，或任何只会让它从图表中消失的东西。

我在构建图表时使用 CSS 样式（在构建它的 JavaScript 上，在 chart.draw(data, options) 上使用选项（系列）。

我无法更改我拥有的数据数组。所以我不是在寻找动态数据，CSS 和 JavaScript 解决方案。

非常感谢任何帮助。

Answer 1

找到这段代码，我能够将它改编成 AreaChart。希望对其他人有帮助..

http://jsfiddle.net/asgallant/6gz2Q/

<div id="chart_div"></div>

<div id="creativeCommons" style="text-align: center; width: 400px;">
    <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/deed.en_US"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by-nc-sa/3.0/88x31.png" /></a><br /><span xmlns:dct="http://purl.org/dc/terms/" href="http://purl.org/dc/dcmitype/InteractiveResource" property="dct:title" rel="dct:type">Code to turn on or off data series by clicking on legend entries</span> by <span xmlns:cc="http://creativecommons.org/ns#" property="cc:attributionName">Andrew Gallant</span> is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/deed.en_US">Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License</a>.
</div>

function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('number', 'X');
    data.addColumn('number', 'Y 1');
    data.addColumn({type: 'boolean', role: 'certainty'});
    data.addColumn('number', 'Y 2');
    data.addColumn({type: 'string', role: 'annotation'});
    data.addColumn({type: 'boolean', role: 'certainty'});
    data.addColumn('number', 'Y 3');
    data.addColumn({type: 'boolean', role: 'certainty'});

    // add random data
    var y1 = 50, y2 = 50, y3 = 50;
    for (var i = 0; i < 30; i++) {
        y1 += ~~(Math.random() * 5) * Math.pow(-1, ~~(Math.random() * 2));
        y2 += ~~(Math.random() * 5) * Math.pow(-1, ~~(Math.random() * 2));
        y3 += ~~(Math.random() * 5) * Math.pow(-1, ~~(Math.random() * 2));
        data.addRow([i, y1, (~~(Math.random() * 2) == 1), y2, y2.toString(), (~~(Math.random() * 2) == 1), y3, (~~(Math.random() * 2) == 1)]);
    }

// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.ChartWrapper({
    chartType: 'LineChart',
    containerId: 'chart_div',
    dataTable: data,
    options: {
        width: 600,
        height: 400
    }
});

// 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: [2],
    display: true
}, {
    column: 3,
    roleColumns: [4, 5],
    display: true
}, {
    column: 6,
    roleColumns: [7],
    display: false
}];
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();
}

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

google 可视化 API - 从图形中隐藏数据列

google visualization API - Hide data column from graphic

javascript

charts

google-visualization