ExtJS ViewPort ContentEl无法呈现Google可视化API饼图
问题描述:
我无法在界面的边框布局中呈现Google饼图。虽然饼图在单独的html页面上运行良好。ExtJS ViewPort ContentEl无法呈现Google可视化API饼图
股利如下:
的JavaScript代码如下所示: { 标题: '查看交互式报告', ContentEl: “pChartMap”,
平淡的道:真的,
bodyStyle : '填充:5px的', 边界:假的, 自动滚屏:真 }
我不知道有关康特ntEl的事。它工作正常,如果有简单的文本,但由于谷歌图表基于谷歌可视化api和AJAX调用,其中有一个函数调用为: google.setOnLoadCallback(createChart);
任何想法如何呈现这将不胜感激。
干杯 阿里
答
你有没有检查这个? http://www.sencha.com/blog/2008/10/13/google-visualization/
可悲的是example page坏了,但仅仅是因为煎茶网站有没有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]
});
});