2

Google を表示するシンプルな表示パネルがあり、次のコードに示すように、SetColumn を使用して DataView に計算列を追加したいと考えています。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<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="http://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([
      ['Name', 'Gender', 'Age', 'Donuts eaten'],
      ['Michael' , 'Male', 12, 5],
      ['Elisa', 'Female', 20, 7],
      ['Robert', 'Male', 7, 3],
      ['John', 'Male', 54, 2],
      ['Jessica', 'Female', 22, 6],
      ['Aaron', 'Male', 3, 1],
      ['Margareth', 'Female', 42, 8],
      ['Miranda', 'Female', 33, 6]
    ]);
    var view = new google.visualization.DataView(data);
    view.setColumns([0,1,2,3,1,{
                       calc: mas,
                       type: 'number',
                       label: 'x10',
    }])
      function mas(view2,row) {
          var a = view2.getValue(row,2)*10;
          return a;
      }
    // Define a slider control for the Age column.
    var slider = new google.visualization.ControlWrapper({
      'controlType': 'NumberRangeFilter',
      'containerId': 'control1',
      'options': {
        'filterColumnLabel': 'Age',
      'ui': {'labelStacking': 'vertical'}
      }
    });

    // Define a category picker control for the Gender column
    var categoryPicker = new google.visualization.ControlWrapper({
      'controlType': 'CategoryFilter',
      'containerId': 'control2',
      'options': {
        'filterColumnLabel': 'Gender',
        'ui': {
        'labelStacking': 'vertical',
          'allowTyping': false,
          'allowMultiple': false
        }
      }
    });

    // Define a Pie chart
    var pie = new google.visualization.ChartWrapper({
      'chartType': 'PieChart',
      'containerId': 'chart1',
      'options': {
        'width': 300,
        'height': 300,
        'legend': 'none',
        'title': 'Donuts eaten per person',
        'chartArea': {'left': 15, 'top': 15, 'right': 0, 'bottom': 0},
        'pieSliceText': 'label'
      },
      // Instruct the piechart to use colums 0 (Name) and 3 (Donuts Eaten)
      // from the 'data' DataTable.
      'view': {'columns': [0, 3]}
    });

    // Define a table
    var table = new google.visualization.ChartWrapper({
      'chartType': 'Table',
      'containerId': 'chart2',
      'options': {
        'width': '300px'
      }
    });

    // Create a dashboard
    new google.visualization.Dashboard(document.getElementById('dashboard')).
        // Establish bindings, declaring the both the slider and the category
        // picker will drive both charts.
        bind([slider, categoryPicker], [pie, table]).
        // Draw the entire dashboard.
        draw(view);
  }


  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>

このコードは、「Google Code Playground」の別のコードに基づいており、その場でテストできます。setColumn(0,1,2,3,1, "the Calculated column") を配置してテーブルにこれらの列を表示できるようにすると、計算された列がテーブルに表示されず、どちらも表示されません。グラフに関連する列を宣言するために PieChart で使用されます。計算列を表示してダッシュボードで使用するにはどうすればよいですか?

前もって感謝します！

4

0 に答える 0