Kategori Filtresi için Google Chart Araçları'nda satır denetimi

Question

Amaç: Görüntülemek istediğiniz çizgileri seçme seçeneği ile çizgi grafikleri görüntüleyin. Başka bir deyişle, bir çizgi grafik var ve 2 satır var, bu yüzden 3 seçenek istiyorum, her ikisini de göster, sadece 1 veya sadece bir tane. Burada gösterilen işlevselliği gibi ama çizgi grafiklerin

şey:http://code.google.com/apis/ajax/playground/?type=visualization#categoryfilter_control

Kodu: kodu da burada bulunabilir

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

Nasıl Yapılır? Bu işlevselliği başardım mı?

Answer 1

Seçenek A: Düğmeler

Verilerinizi filtrelemek için javascript çalışır (etiketi veya vs. kullanarak ya) bir düğme yapabilirsiniz olun. Bu, işaretlendiğinde javascript çalıştıracak üç düğme (veya 3 radyo seçim kutusu veya iki onay kutusu ve bir düğme veya herhangi bir şey) oluşturabileceğiniz anlamına gelir.

Bu javascript, seçiminiz için uygun sütunları içerecek şekilde verilerinizi filtreleyecek bir işlevi (muhtemelen SetColumns ile bir DataView Class kullanarak) içermelidir. Bunu yapmak için bir trilyon yolu vardır ve bazı genel verileri kullandığınızdan ve gerçek uygulamanız muhtemelen farklı olduğundan, verileriniz/kullanıcılarınız için en iyi olanı anlamanıza izin vereceğim.

Seçenek B: Google Görselleştirme

Ayrıca ayarlama birazcık Google Görselleştirme Category Filter Control kullanarak aynı yapabiliriz kontrol eder. here no'lu bir açıklama ile, asgallant here tarafından mükemmel bir örnek var. Bu bir ara tablo gerektirir, ancak kategori filtresinin nasıl çalıştığını/çalışmasını seviyorsanız iyi çalışır. Her şey sana bağlı! site kodu satır içi koymamı istiyor beri

, burada mısın:

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(); 
}