8

目的： 表示する線を選択するオプションを使用して折れ線グラフを表示します。つまり、折れ線グラフがあり、2本の線があるので、3つのオプションが必要で、最初の1つだけ、または2番目のオプションの両方を表示するとします。

ここに示されている機能のようなものですが、折れ線グラフ用です： 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を実行してデータをフィルタリングするボタンを作成できます（タグなどを使用）。これは、チェックしたときにjavascriptを実行する3つのボタン（または3つのラジオ選択ボックスまたは2つのチェックボックスと1つのボタンなど）を作成できることを意味します。

そのjavascriptには、データをフィルタリングして（ SetColumnsでDataViewクラスを使用する可能性があります）、選択に適した列を含める関数が含まれている必要があります。これを行うには何兆もの方法があります。一般的なデータを使用していて、実際のアプリケーションはおそらく異なるため、データ/ユーザーに最適な方法を見つけましょう。

オプションB：GoogleVisualizationControlsを使用する

少し調整して、Google Visualization CategoryFilterControlを使用して同じことを行うこともできます。ここに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 に答える