0

伙计们，

我设法用仪表板控件创建了一个谷歌图表。您可以选择一个值，它会在一个漂亮的饼图中很好地显示它的数据。这一切都完美无缺。

我的问题是我需要在一个页面上超过 1 个，但我无法重新编码以实现这一目标。

即会有另一个饼图使用它自己的数据表，并使用它自己的仪表板控件。

它看起来像这样：

图表

<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([
      ['Variant', 'Data', 'Percentage'],
      ['Ring Size','Size 3', 30],
      ['Ring Size','Size 4', 20],
      ['Ring Size','Size 5', 10],
      ['Ring Size','Size 6', 15],
      ['Ring Size','Size 7', 10],
      ['Ring Size','Size 8', 15],
      ['Extra Info','Jewellery', 100],
      ['Colour','Black', 40],
      ['Colour','Biege', 30],
      ['Colour','Red', 15],
      ['Colour','Green', 15]
    ]);


    var regionPicker = new google.visualization.ControlWrapper({
      'controlType': 'CategoryFilter',
      'containerId': 'control1',
      'options': {
        'filterColumnLabel': 'Variant',
        'ui': {
        'allowNone': false,
          'labelStacking': 'vertical',
          'allowTyping': false,
          'allowMultiple': false
        }
      }
    });


    // Define a bar chart to show 'Population' data
    var barChart = new google.visualization.ChartWrapper({
      'chartType': 'PieChart',
      'containerId': 'chart1',
      'options': {
        'width': '300',
        'height': '300',
        'chartArea': {top: 0, left: 0, width:"100%", height:"100%"},
        'legend': {position: 'right', alignment: 'center'},
      },
      'view': {'columns': [1, 2]}
    });


    // Create the dashboard.
    new google.visualization.Dashboard(document.getElementById('dashboard')).
      bind(regionPicker, barChart).
      draw(data);
  }


  google.setOnLoadCallback(drawVisualization);

</script>

4

0 回答 0