0

私がやった事？ 複数のデータを含むダッシュボードを構築しています。データは配列形式です。

何を実装する必要がありますか? チュートリアルを使用してダッシュボードを実装しましたが、別のデータ ソースを実装できません。

これが私のコードです

<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 data1 = google.visualization.arrayToDataTable([
        ['Name', 'Type', 'Precheck Alarms', 'Postcheck Alarms'],
        ['Michael' , 'Type1', 12, 5],
        ['Elisa', 'Type2', 20, 7],
        ['Robert', 'Type1', 7, 3],
        ['John', 'Type1', 54, 2],
        ['Jessica', 'Type2', 22, 6],
        ['Aaron', 'Type1', 3, 1],
        ['Margareth', 'Type2', 42, 8],
        ['Miranda', 'Type2', 33, 6]
      ]);
       var data2 = google.visualization.arrayToDataTable([
        ['Name', 'Type', 'Precheck Alarms', 'Postcheck Alarms'],
        ['Michael' , 'Type1', 12, 5],
        ['Elisa', 'Type2', 20, 7],
        ['Robert', 'Type1', 7, 3],
        ['John', 'Type1', 54, 2],
        ['Jessica', 'Type2', 22, 6],
        ['Aaron', 'Type1', 3, 1],
        ['Margareth', 'Type2', 42, 8],
        ['Miranda', 'Type2', 33, 6]
      ]);     

  // Define a category picker control for the Type column



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

  // Define a Pie chart
  var columns_alarms = new google.visualization.ChartWrapper({
    'chartType': 'ColumnChart',
    'containerId': 'chart1',
    'options': {
      'width': 600,
      'height': 600,
      'legend': 'none',
      'title': 'Alarms',
      '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, 2,3]}
  });

  // Define a table


 var table_alarms = new google.visualization.ChartWrapper({
    'chartType': 'Table',
    'containerId': 'chart2',
    'options': {
      'width': '300px'
    }
  });
 var columns_kpi = new google.visualization.ChartWrapper({
    'chartType': 'ColumnChart',
    'containerId': 'chart4',
    'options': {
      'width': 600,
      'height': 600,
      'legend': 'none',
      'title': 'Alarms',
      '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, 2,3]}
  });

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

  // Create a dashboard
  new google.visualization.Dashboard(document.getElementById('dashboard_alarms')).
  new google.visualization.Dashboard(document.getElementById('dashboard_kpi')).
      // Establish bindings, declaring the both the slider and the category
      // picker will drive both charts.
      bind([categoryPicker], [columns_kpi, table_kpi,columns_alarms, table_alarms]).
      // Draw the entire dashboard.
      draw(data1);
      draw(data2);

}


      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>
            <div style="float: left;" id="chart4"></div>
            <div style="float: left;" id="chart5"></div>
          </td>
        </tr>
      </table>
    </div>
  </body>
</html>

上記のコードは WSD をレンダリングします。

4

2 に答える 2

0

あなたのコードにはいくつかの間違いがあります。

 new google.visualization.Dashboard(document.getElementById('dashboard_alarms')).
 new google.visualization.Dashboard(document.getElementById('dashboard_kpi')).

する必要があります

 new google.visualization.Dashboard(document.getElementById('dashboard_alarms'));
 new google.visualization.Dashboard(document.getElementById('dashboard_kpi')).

(「.」は最初の行の末尾の「;」である必要があります)

また、同じ 2 行で id を持つ要素を参照してdashboard_alarmsいdashboard_kpiますが、html にはそれらの要素がありません。タグを追加する必要があります

<div id="dashboard_alarms"/>
<div id="dashboard_kpi"/>

あなたのhtmlに。

Firefox を使用している場合は、 firebugを使用して JavaScript コードをデバッグできます。Goole chrome にも javascrpt デバッガーが含まれている場合があります。JavaScript デバッガーを使用すると、このような問題の原因を診断できます。

コードの実例はjsfiddleにあります。

于 2012-11-24T06:28:21.100 に答える