google.visualization.ChartWrapper組列查看

我是新的使用谷歌可視化API加我不是很熟悉JavaScript。google.visualization.ChartWrapper組列查看

我希望我的輸出結果是按第2列中的標籤進行分組。請注意，紐約在圖表上重複出現。我只想讓圖表按標籤對第2列進行分組，並在第3列中對數字進行求和。有人知道如何做？

<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/> 
    <title> 
     Google Visualization API Sample 
    </title> 
    <script type="text/javascript" src="//www.google.com/jsapi"></script> 
    <script type="text/javascript"> 
     google.load('visualization', '1.1', {packages: ['controls']}); 
    </script> 
    <script type="text/javascript"> 
     function drawVisualization() { 
     // Prepare the data 
     var data = google.visualization.arrayToDataTable([ 
      ['Country', 'Region/State', 'City', 'Population'], 
      ['USA', 'California', 'San Francisco', 776733], 
      ['USA', 'California', 'Los Angeles', 3694820], 
      ['USA', 'California', 'Mountain View', 70708], 
      ['USA', 'New York', 'New York', 8175173], 
      ['USA', 'New York', 'New York', 8175173], 
      ['USA', 'New York', 'Albany', 857592], 
      ['France', 'Ile-de-France', 'Paris', 2193031], 
      ['France', 'Ile-de-France', 'Orly', 21372], 
      ['France', 'Provence', 'Marseille', 852395], 
      ['France', 'Provence', 'Nice', 348556] 
     ]); 

     // Define category pickers for 'Country', 'Region/State' and 'City' 
     var countryPicker = new google.visualization.ControlWrapper({ 
      'controlType': 'CategoryFilter', 
      'containerId': 'control1', 
      'options': { 
      'filterColumnLabel': 'Country', 
      'ui': { 
       'labelStacking': 'vertical', 
       'allowTyping': false, 
       'allowMultiple': false 
      } 
      } 
     }); 

     var regionPicker = new google.visualization.ControlWrapper({ 
      'controlType': 'CategoryFilter', 
      'containerId': 'control2', 
      'options': { 
      'filterColumnLabel': 'Region/State', 
      'ui': { 
       'labelStacking': 'vertical', 
       'allowTyping': false, 
       'allowMultiple': false 
      } 
      } 
     }); 

     var cityPicker = new google.visualization.ControlWrapper({ 
      'controlType': 'CategoryFilter', 
      'containerId': 'control3', 
      'options': { 
      'filterColumnLabel': 'City', 
      'ui': { 
       'labelStacking': 'vertical', 
       'allowTyping': false, 
       'allowMultiple': false 
      } 
      } 
     }); 

     // Define a bar chart to show 'Population' data 
     var barChart = new google.visualization.ChartWrapper({ 
      'chartType': 'BarChart', 
      'containerId': 'chart1', 
      'options': { 
      'width': 400, 
      'height': 300, 
      'chartArea': {top: 0, right: 0, bottom: 0} 
      }, 
      // Configure the barchart to use columns 2 (City) and 3 (Population) 
      'view': {'columns': [2, 3]} 
     }); 

     // Create the dashboard. 
     new google.visualization.Dashboard(document.getElementById('dashboard')). 
      // Configure the controls so that: 
      // - the 'Country' selection drives the 'Region' one, 
      // - the 'Region' selection drives the 'City' one, 
      // - and finally the 'City' output drives the chart 
      bind(countryPicker, regionPicker). 
      bind(regionPicker, cityPicker). 
      bind(cityPicker, barChart). 
      // Draw the dashboard 
      draw(data); 
     } 


     google.setOnLoadCallback(drawVisualization); 
    </script> 
    </head> 
    <body style="font-family: Arial;border: 0 none;"> 
    <div id="dashboard"> 
     <table> 
     <tr style='vertical-align: top'> 
      <td style='width: 300px; font-size: 0.9em;'> 
      <div id="control1"></div> 
      <div id="control2"></div> 
      <div id="control3"></div> 
      </td> 
      <td style='width: 600px'> 
      <div style="float: left;" id="chart1"></div> 
      <div style="float: left;" id="chart2"></div> 
      <div style="float: left;" id="chart3"></div> 
      </td> 
     </tr> 
     </table> 
    </div> 
    </body> 
</html>

output

來源

2014-02-16 user3316652

爲了使這項工作，你需要一箇中介可視化作爲儀表板中的代理（我通常使用一個表此）。儀表板將代理綁定到您的控件（而不是將您的圖表綁定到控件）。在代理的「準備就緒」事件處理程序中，您需要彙總代理的數據並使用匯總數據繪製圖表。這裏有一個例子：

function drawVisualization() { 
    // Prepare the data 
    var data = google.visualization.arrayToDataTable([ 
     ['Country', 'Region/State', 'City', 'Population'], 
     ['USA', 'California', 'San Francisco', 776733], 
     ['USA', 'California', 'Los Angeles', 3694820], 
     ['USA', 'California', 'Mountain View', 70708], 
     ['USA', 'New York', 'New York', 8175173], 
     ['USA', 'New York', 'New York', 8175173], 
     ['USA', 'New York', 'Albany', 857592], 
     ['France', 'Ile-de-France', 'Paris', 2193031], 
     ['France', 'Ile-de-France', 'Orly', 21372], 
     ['France', 'Provence', 'Marseille', 852395], 
     ['France', 'Provence', 'Nice', 348556] 
    ]); 

    // Define category pickers for 'Country', 'Region/State' and 'City' 
    var countryPicker = new google.visualization.ControlWrapper({ 
     'controlType': 'CategoryFilter', 
     'containerId': 'control1', 
     'options': { 
      'filterColumnLabel': 'Country', 
      'ui': { 
       'labelStacking': 'vertical', 
       'allowTyping': false, 
       'allowMultiple': false 
      } 
     } 
    }); 

    var regionPicker = new google.visualization.ControlWrapper({ 
     'controlType': 'CategoryFilter', 
     'containerId': 'control2', 
     'options': { 
      'filterColumnLabel': 'Region/State', 
      'ui': { 
       'labelStacking': 'vertical', 
       'allowTyping': false, 
       'allowMultiple': false 
      } 
     } 
    }); 

    var cityPicker = new google.visualization.ControlWrapper({ 
     'controlType': 'CategoryFilter', 
     'containerId': 'control3', 
     'options': { 
      'filterColumnLabel': 'City', 
      'ui': { 
       'labelStacking': 'vertical', 
       'allowTyping': false, 
       'allowMultiple': false 
      } 
     } 
    }); 

    // Define a bar chart to show 'Population' data 
    var barChart = new google.visualization.ChartWrapper({ 
     'chartType': 'BarChart', 
     'containerId': 'chart1', 
     'options': { 
      'width': 400, 
      'height': 300, 
      'chartArea': {top: 0, right: 0, bottom: 0} 
     }, 
     // Configure the barchart to use columns 2 (City) and 3 (Population) 
     'view': {'columns': [2, 3]} 
    }); 

    var proxyTable = new google.visualization.ChartWrapper({ 
     chartType: 'Table', 
     containerId: 'proxyTable', 
     options: { 
      // minimize the footprint of the table in HTML 
      page: 'enable', 
      pageSize: 1 
     }, 
     view: { 
      columns: [0] 
     } 
    }); 

    // create a "ready" event handler for proxyTable the handles data aggregation and drawing barChart 
    google.visualization.events.addListener(proxyTable, 'ready', function() { 
     var dt = proxyTable.getDataTable(); 
     var groupedData = google.visualization.data.group(dt, [0, 1, 2], [{ 
      column: 3, 
      type: 'number', 
      label: dt.getColumnLabel(3), 
      aggregation: google.visualization.data.sum 
     }]); 
     // after grouping, the data will be sorted by column 0, then 1, then 2 
     // if you want a different order, you have to re-sort 
     barChart.setDataTable(groupedData); 
     barChart.draw(); 
    }); 

    // Create the dashboard. 
    new google.visualization.Dashboard(document.getElementById('dashboard')). 
    // Configure the controls so that: 
    // - the 'Country' selection drives the 'Region' one, 
    // - the 'Region' selection drives the 'City' one, 
    // - and finally the 'City' output drives proxyTable 
    bind(countryPicker, regionPicker). 
    bind(regionPicker, cityPicker). 
    bind(cityPicker, proxyTable). 
    // Draw the dashboard 
    draw(data); 
} 
google.load('visualization', '1', {packages:['corechart', 'controls', 'table'], callback: drawVisualization});

看到這裏的工作例如：http://jsfiddle.net/asgallant/MebSS/

來源

2014-02-19 23:42:35 asgallant

google.visualization.ChartWrapper組列查看

回答

相關問題