Charts 带有多个仪表盘的Google图表同一页面上有多个图表

伙计们

我已经成功地创建了一个带有仪表板控件的谷歌图表。您可以选择一个值，它将在一个漂亮的饼图中显示它的数据。这一切都很完美

我的问题是我需要在一个页面上有多个这样的代码，但我无法重新编码来实现这个目标

也就是说，将有另一个饼图使用它自己的数据表，并与它自己的仪表板控制

看起来是这样的：

<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>

load（'visualization'，'1.1'，{packages:['controls']}）；
函数drawVisualization（）{
//准备数据
var data=google.visualization.arrayToDataTable([
[‘变量’、‘数据’、‘百分比’]，
['环尺寸'，'尺寸3'，30]，
['环尺寸'，'尺寸4'，20]，
['环尺寸'，'尺寸5'，10]，
[‘环尺寸’、‘尺寸6’、15]，
['环尺寸'，'尺寸7'，10]，
[‘环尺寸’、‘尺寸8’、15]，
[“额外信息”，“珠宝”，100]，
[‘颜色’、‘黑色’、40]，
['color'，'Biege'，30]，
[‘颜色’、‘红色’、15]，
[“颜色”，“绿色”，15]
]);
var regionPicker=new google.visualization.ControlWrapper({
“controlType”：“CategoryFilter”，
“containerId”：“control1”，
“选项”：{
'filterColumnLabel'：'Variant'，
“用户界面”：{
“AllowOne”：错误，
“标签固定”：“垂直”，
“allowTyping”：false，
“allowMultiple”：false
}
}
});
//定义条形图以显示“人口”数据
var barChart=new google.visualization.ChartWrapper({
'chartType'：'PieChart'，
“集装箱运输”：“图表1”，
“选项”：{
“宽度”：“300”，
“高度”：“300”，
'chartArea'：{顶部：0，左侧：0，宽度：“100%”，高度：“100%”，
'图例'：{位置：'右'，对齐：'中心'}，
},
'视图'：{'列'：[1,2]}
});
//创建仪表板。
新的google.visualization.Dashboard（document.getElementById（'Dashboard'））。
绑定（区域选择器、条形图）。
绘制（数据）；
}
setOnLoadCallback（drawVisualization）；

---

您没有包括您尝试的代码，但我可能只是认为您必须为每个实例control2和chart2使用不同的容器ID。从整个仪表板生成器中生成一个函数，并为其提供参数，以提供唯一的数据和ID。例如@dlaliberte，我看不出上面的问题。看起来您的代码可以生成图表，那么您遇到的问题是什么？这是怎么回事？如果你单独做这件事，它能不能工作？如上所述，如果两个仪表板使用相同的

名称，其中一个将覆盖另一个。