Javascript 将extjs条形图示例加载到div标记中
这里只是一个新手,试图理解并使用ExtJS4.2.1。我真的很喜欢图表和网格,并希望将它们合并到我当前的应用程序中。我让示例网格在我的应用程序中工作,但是图表变得有点难。我在上使用了示例代码 它在另一个窗口中呈现图表,并想知道是否有人可以帮助我将其放入我的一个面板上的div标记中 以下是我为图表准备的容器:Javascript 将extjs条形图示例加载到div标记中,javascript,html,charts,extjs4.2,Javascript,Html,Charts,Extjs4.2,这里只是一个新手,试图理解并使用ExtJS4.2.1。我真的很喜欢图表和网格,并希望将它们合并到我当前的应用程序中。我让示例网格在我的应用程序中工作,但是图表变得有点难。我在上使用了示例代码 它在另一个窗口中呈现图表,并想知道是否有人可以帮助我将其放入我的一个面板上的div标记中 以下是我为图表准备的容器: <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="splitter:false">
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="splitter:false">
<div id="container"></div>
</div>
Ext.require(['Ext.Window','Ext.fx.target.Sprite','Ext.layout.container.Fit'])
Ext.onReady(函数(){
可变区
var store = new Ext.data.JsonStore({
fields: ['name', 'visits', 'views'],
data: [
{ name: 'Jul 07', visits: 245000, views: 3000000 },
{ name: 'Aug 07', visits: 240000, views: 3500000 },
{ name: 'Sep 07', visits: 355000, views: 4000000 },
{ name: 'Oct 07', visits: 375000, views: 4200000 },
{ name: 'Nov 07', visits: 490000, views: 4500000 },
{ name: 'Dec 07', visits: 495000, views: 5800000 },
{ name: 'Jan 08', visits: 520000, views: 6000000 },
{ name: 'Feb 08', visits: 620000, views: 7500000 }
]
});
Ext.define('Ext.chart.theme.CustomBlue'{
扩展:“Ext.chart.theme.Base”
constructor: function (config) {
var titleLabel = {
font: 'bold 18px Arial'
}, axisLabel = {
fill: 'rgb(8,69,148)',
font: '12px Arial',
spacing: 2,
padding: 5
};
this.callParent([Ext.apply({
axis: {
stroke: '#084594'
},
axisLabelLeft: axisLabel,
axisLabelBottom: axisLabel,
axisTitleLeft: titleLabel,
axisTitleBottom: titleLabel
}, config)]);
}
});
var chart = Ext.create('Ext.chart.Chart', {
animate: true,
shadow: true,
store: store,
axes: [{
type: 'Numeric',
position: 'bottom',
fields: ['data1'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
title: 'Number of Hits',
grid: true,
minimum: 0
}, {
type: 'Category',
position: 'left',
fields: ['name'],
title: 'Month of the Year'
}],
theme: 'CustomBlue',
background: {
gradient: {
id: 'backgroundGradient',
angle: 45,
stops: {
0: {
color: '#ffffff'
},
100: {
color: '#eaf1f8'
}
}
}
},
series: [{
type: 'bar',
axis: 'bottom',
highlight: true,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function (storeItem, item) {
this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data1') + ' views');
}
},
label: {
display: 'insideEnd',
field: 'data1',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'horizontal',
color: '#333',
'text-anchor': 'middle'
},
xField: 'name',
yField: ['data1']
}]
renderTo: "container"
});
})您没有解释问题是什么,但是从代码中可以清楚地看到
问题是你需要给图表一个宽度/高度,因为它需要适当的尺寸。在文档的原始示例中,尺寸是由窗口上使用的
fit
布局明确提供的。非常感谢。是的,我没有澄清,我没有看到图表。一旦我添加了高度:350,宽度:800,我可以看到图表,但看不到条形图和数据;所以在接受您的回答之前,我会先处理一下。非常感谢您的回答。图表定义中的字段data1
与存储中的字段不匹配。是的,我已经完成了,谢谢。顺便问一下,您是否知道一个说明从re获取数据的链接移动源代码并将其传递给extjs中的这些小部件、图表/网格。我现在不打扰您了,再次感谢您。是的,有很多示例。grep
examples目录用于调用商店中的.load()
。
constructor: function (config) {
var titleLabel = {
font: 'bold 18px Arial'
}, axisLabel = {
fill: 'rgb(8,69,148)',
font: '12px Arial',
spacing: 2,
padding: 5
};
this.callParent([Ext.apply({
axis: {
stroke: '#084594'
},
axisLabelLeft: axisLabel,
axisLabelBottom: axisLabel,
axisTitleLeft: titleLabel,
axisTitleBottom: titleLabel
}, config)]);
}
});
var chart = Ext.create('Ext.chart.Chart', {
animate: true,
shadow: true,
store: store,
axes: [{
type: 'Numeric',
position: 'bottom',
fields: ['data1'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
title: 'Number of Hits',
grid: true,
minimum: 0
}, {
type: 'Category',
position: 'left',
fields: ['name'],
title: 'Month of the Year'
}],
theme: 'CustomBlue',
background: {
gradient: {
id: 'backgroundGradient',
angle: 45,
stops: {
0: {
color: '#ffffff'
},
100: {
color: '#eaf1f8'
}
}
}
},
series: [{
type: 'bar',
axis: 'bottom',
highlight: true,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function (storeItem, item) {
this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data1') + ' views');
}
},
label: {
display: 'insideEnd',
field: 'data1',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'horizontal',
color: '#333',
'text-anchor': 'middle'
},
xField: 'name',
yField: ['data1']
}]
renderTo: "container"
});