8

目的： 显示折线图，可以选择要查看的线。换句话说，假设有一个折线图，我有 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}}
          );
}

​</p>

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

我怎样才能实现这个功能？

4

1 回答 1

10

选项 A：制作按钮

您可以制作一个按钮（使用标签或 等）运行 javascript 来过滤您的数据。这意味着您可以创建三个按钮（或 3 个单选框，或两个复选框和一个按钮，或其他），这些按钮在选中时将运行 javascript。

该 javascript 应该包含一个函数，该函数将过滤您的数据（可能使用带有 SetColumns 的DataView 类）以包含适合您选择的列。有一万亿种方法可以做到这一点，并且由于您使用的是一些通用数据并且您的实际应用程序可能不同，我会让您找出最适合您的数据/用户的方法。

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

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

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

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();
}
于 2013-01-11T03:46:05.157 回答