ExtJS ViewPort ContentEl 不呈现 Google Visualization API 饼图答案

【问题标题】：ExtJS ViewPort ContentEl not rendering Google Visualisation API Pie ChartExtJS ViewPort ContentEl 不呈现 Google Visualization API 饼图
【发布时间】：2010-09-01 12:22:12
【问题描述】：

我无法在界面的边框布局中呈现谷歌饼图。虽然饼图在单独的 html 页面上工作正常。

div如下：

javascript 代码如下所示： { 标题：'查看交互式报告'， ContentEl: "pChartMap",
平原：真的，
bodyStyle: '填充：5px', 边框：假，自动滚动：真 }

我不确定 ContentEl 的事情。如果那里有简单的文本，它工作正常，但由于谷歌图表基于谷歌可视化 api 和 AJAX 调用，其中有一个函数调用： google.setOnLoadCallback(createChart);

任何关于如何渲染它的想法将不胜感激。

干杯阿里

【问题讨论】：

标签： extjs

【解决方案1】：

你检查了吗？ http://www.sencha.com/blog/2008/10/13/google-visualization/

遗憾的是example page 坏了，只是因为sencha 站点没有ExtJS 的2.2 源；或者至少不在样本期望的地方；但是，如果您下载该页面并使用ExtJS 2.3.0，它将起作用。

反正你只需要下载这个js：http://dev.sencha.com/playpen/google-visualization/GVisualizationPanel.js

然后只需使用Ext.ux.GVisualizationPanel。这是我测试的一个例子：

Ext.onReady(function() {
    var lineChartDs = new Ext.data.SimpleStore({
        fields: [
            {name: 'yr', type: 'string'}
            ,{name: 'sales', type: 'int'}
            ,{name: 'expenses', type: 'int'}
        ],
        data: [['2004',1000,400],['2005',1170,460],['2006',860,580],['2007',1030,540]]
    });
    var lineChart = new Ext.ux.GVisualizationPanel({
        id: 'lineChart',
        visualizationPkg: 'linechart',
        title: 'Company Performance Sample',
        store: lineChartDs,
        columns: [
            {dataIndex: 'yr', label: 'Year'}
            ,{dataIndex: 'sales', label: 'Sales'}
            ,{dataIndex: 'expenses', label: 'Expenses'}
        ]
    })
    new Ext.Viewport({
        layout: 'fit',
        items: [lineChart]
    });
});

【讨论】：