Question

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

div如下：

javascript代码如下所示： { 标题：'查看互动报告'， ContentEl：“pChartMap”，
普通：真实，
bodyStyle：'padding：5px'， border：false， autoScroll：true }

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

任何想法如何呈现这一点将不胜感激。

干杯阿里

Answer 1

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

可悲的是，example page已被破坏，但仅仅是因为sencha网站不再具有 2.2 ExtJS 的来源了;或者至少不存在样本所期望的地方;但如果您下载页面并使用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]
    });
});

ExtJS ViewPort ContentEl无法呈现Google Visualization API饼图

1 个答案: