集成extjs 3.4和谷歌图表api

时间:2012-04-01 12:20:05

标签: extjs google-visualization

首先,我是新手。我需要一些帮助来整合Ext js 3.4和google chart api。 我想将谷歌饼图添加到Ext.FormPanel 我使用以下代码创建了一个面板

 var grid = new Ext.FormPanel({
        id:'test',
          renderTo: 'panel',
          title:'Sign up',
          bodyStyle: 'padding: 10px;',
          frame: true,
          width:500,
         height:500
        });

以下代码尝试将饼图添加到上面的面板中。

google.load('visualization', '1.0', {'packages':['corechart']});
  google.setOnLoadCallback(drawChart);

  function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Topping');
    data.addColumn('number', 'Slices');
    data.addRows([
      ['Mushrooms', 3],
      ['Onions', 1],
      ['Olives', 1],
      ['Zucchini', 1],
      ['Pepperoni', 2]
    ]);


    var options = {'title':'How Much Pizza I Ate Last Night',
                   'width':400,
                   'height':300};

    var chart = new google.visualization.PieChart(document.getElementById('test'));
    chart.draw(data, options);
  }  

Fire bug正在向我提供错误消息

“未定义容器”。

1 个答案:

答案 0 :(得分:1)

尝试在html正文中创建一个id为container的div。