google.visualization.ChartWrapper Group Columns View

Я новичок в API визуализации Google, и я не очень хорошо знаком с JavaScript.google.visualization.ChartWrapper Group Columns View

Что я хочу, чтобы мой вывод состоял в том, чтобы группировать по меткам из столбца 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 Group Columns View

ответ

Смежные вопросы