Question

目的： 显示折线图，其中包含选择要查看的行的选项。换句话说，假设有一个折线图，我有2行，所以我想要3个选项，同时显示两个，只显示第一个或仅第二个。

此处显示的功能类似于折线图： http://code.google.com/apis/ajax/playground/?type=visualization#categoryfilter_control

代码：

    function drawVisualization() {
  // Create and populate the data table.
  var data = google.visualization.arrayToDataTable([
    ['x', 'Cats', 'Blanket 1', 'Blanket 2'],
    ['A',   1,       1,           0.5],
    ['B',   2,       0.5,         1],
    ['C',   4,       1,           0.5],
    ['D',   8,       0.5,         1],
    ['E',   7,       1,           0.5],
    ['F',   7,       0.5,         1],
    ['G',   8,       1,           0.5],
    ['H',   4,       0.5,         1],
    ['I',   2,       1,           0.5],
    ['J',   3.5,     0.5,         1],
    ['K',   3,       1,           0.5],
    ['L',   3.5,     0.5,         1],
    ['M',   1,       1,           0.5],
    ['N',   1,       0.5,         1]
  ]);

  // Create and draw the visualization.
  new google.visualization.LineChart(document.getElementById('visualization')).
      draw(data, {curveType: "function",
                  width: 500, height: 400,
                  vAxis: {maxValue: 10}}
          );
}

代码也可以在这里找到：http://code.google.com/apis/ajax/playground/?type=visualization#line_chart

如何实现此功能？

Answer 1

选项A：制作按钮

您可以创建一个按钮（使用标签，或等）运行javascript来过滤您的数据。这意味着你可以创建三个按钮（或3个无线电选择框，或两个复选框和一个按钮，或其他），它们将在检查时运行javascript。

该javascript应该包含一个过滤数据的函数（可能使用带有SetColumns的DataView Class）来包含适合您选择的列。有很多方法可以做到这一点，因为你使用的是一些通用数据而你的实际应用程序可能不同，我会让你弄清楚什么最适合你的数据/用户。

选项B：使用Google可视化控件

您也可以使用Google Visualization Category Filter Control进行相同的调整。 asgallant here有一个很好的例子，有一个解释here。这需要一个中间表，但如果您喜欢类别过滤器的外观/工作方式，则效果很好。这完全取决于你！

由于该网站希望我将代码内联，您在这里：

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

function drawChart () {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Year');
    data.addColumn('number', 'Foo');
    data.addColumn('number', 'Bar');
    data.addColumn('number', 'Baz');
    data.addColumn('number', 'Cad');
    data.addRows([
        ['2005',  45, 60, 89, 100],
        ['2006',  155, 50, 79, 24],
        ['2007',  35, 31, 140, 53],
        ['2008',  105, 23, 43, 82],
        ['2009',  120, 56, 21, 67],
        ['2010',  65, 19, 34, 134],
        ['2011',  80, 23, 130, 40],
        ['2012',  70, 140, 83, 90]
    ]);

    var columnsTable = new google.visualization.DataTable();
    columnsTable.addColumn('number', 'colIndex');
    columnsTable.addColumn('string', 'colLabel');
    var initState= {selectedValues: []};
    // put the columns into this data table (skip column 0)
    for (var i = 1; i < data.getNumberOfColumns(); i++) {
        columnsTable.addRow([i, data.getColumnLabel(i)]);
        initState.selectedValues.push(data.getColumnLabel(i));
    }

    var chart = new google.visualization.ChartWrapper({
        chartType: 'BarChart',
        containerId: 'chart_div',
        dataTable: data,
        options: {
            title: 'Foobar',
            width: 600,
            height: 400
        }
    });

    chart.draw();

    var columnFilter = new google.visualization.ControlWrapper({
        controlType: 'CategoryFilter',
        containerId: 'colFilter_div',
        dataTable: columnsTable,
        options: {
            filterColumnLabel: 'colLabel',
            ui: {
                label: 'Columns',
                allowTyping: false,
                allowMultiple: true,
                selectedValuesLayout: 'belowStacked'
            }
        },
        state: initState
    });

    google.visualization.events.addListener(columnFilter, 'statechange', function () {
        var state = columnFilter.getState();
        var row;
        var columnIndices = [0];
        for (var i = 0; i < state.selectedValues.length; i++) {
            row = columnsTable.getFilteredRows([{column: 1, value: state.selectedValues[i]}])[0];
            columnIndices.push(columnsTable.getValue(row, 0));
        }
        // sort the indices into their original order
        columnIndices.sort(function (a, b) {
            return (a - b);
        });
        chart.setView({columns: columnIndices});
        chart.draw();
    });

    columnFilter.draw();
}

Google Chart工具中折线图的类别过滤器控件

1 个答案: