我想将Devexpress中的dxChart嵌入到extjs面板中。。。
以下是我的基本尝试：
var chart = $('#chartContainer').dxChart({
size:{height:200,height:200},
commonSeriesSettings: {
label: {
visible: true
}
},
series: [{
data: [
{ arg: 0, val: 1 },
{ arg: 2, val: 4 },
{ arg: 4, val: 2 }]
}, {
data: [
{ arg: 1, val: 1 },
{ arg: 2.5, val: 9 },
{ arg: 3.7, val: 5.6 }]
}]
});
var panelChart = new Ext.Panel({
items: [{
contentEl: 'chartContainer',
border: false,
layout: 'fit'
}]
});
<body>
<div id="chartContainer" style="width: 100%; height: 100%"></div>
</body>
如果我从正文中删除div，则图表不会出现在面板中：（
但像这样，它不会随着窗口大小而改变图表大小。我不想在正文中声明div。
有什么想法吗？我想像Extjs的Highcharts一样使用它。有可能吗？
提前感谢：）
使用面板的html属性在面板主体中渲染div。在面板的afterrender事件中创建图表，以便div可用。最后，在调整面板大小时，使用resize事件来调整div的大小。
请参阅其他答案。图表库不同，但原理完全相同。
编辑
我无法调整图表的高度。由于我对lib一无所知，我只是提到了这个支持问题。。。但我认为这是你使用的图表类型的正常行为。
不管怎样，这是我的代码（也在这个小提琴里）：
Ext.define('DxChartPanel', {
extend: 'Ext.Panel'
,resizable: true
,html: '<div class="chartContainer" style="width: 100%; height: 100%"></div>'
,initComponent: function() {
this.callParent(arguments);
this.on({
scope: this
,resize: function(panel) {
var ct = panel.body.down('.chartContainer'),
chart = $(ct.dom).dxChart('instance');
ct.setSize(panel.body.getSize());
chart._render({ animate: false })
// Animated resize
//chart._render();
}
,afterrender: function(panel) {
var el = this.body,
target = el.down('.chartContainer');
target.setSize(el.getSize());
this.createChart($(target.dom));
}
});
}
,createChart: function(target) {
var c = target.dxChart({
size:{height:200,height:300},
commonSeriesSettings: {
label: {
visible: true
}
},
series: [{
data: [
{ arg: 0, val: 1 },
{ arg: 2, val: 4 },
{ arg: 4, val: 2 }]
}, {
data: [
{ arg: 1, val: 1 },
{ arg: 2.5, val: 9 },
{ arg: 3.7, val: 5.6 }]
}]
});
}
});
Ext.create('DxChartPanel', {
renderTo: Ext.getBody()
,title: "Resizable Panel"
,height: 300
,width: 300
});
Ext.widget('window', {
autoShow: true
,title: "dxChart Window"
,width: 350
,height: 350
,layout: 'fit'
,items: [Ext.create('DxChartPanel', {
border: false
})]
});
rixo的代码只有两件事阻止了调整大小以正常工作：
首先，图表的大小被设置为常数（而不是根据容器的大小计算）
我删除了
size:{height:200,height:300}
更新：有一个大小问题，不需要超时
其次，由于某种原因，ExtJS在实际调整大小之前触发"调整大小"事件（因此容器仍然具有完全相同的大小）
为了在真正调整大小后重新渲染图表，我添加了具有零间隔的setTimeout调用
setTimeout(function () {
chart._render({ animate: false })
})
现在它似乎正在正常工作并调整的大小
rixo小提琴的返工版本可在此处访问：http://jsfiddle.net/kaatula/4sHkZ/1/
代码现在看起来像：
Ext.define('DxChartPanel', {
extend: 'Ext.Panel'
,resizable: true
,html: '<div class="chartContainer" style="width: 100%; height: 100%"></div>'
,initComponent: function() {
this.callParent(arguments);
this.on({
scope: this
,resize: function(panel) {
var ct = panel.body.down('.chartContainer'),
chart = $(ct.dom).dxChart('instance');
console.log($(ct.dom).height());
ct.setSize(panel.body.getSize());
setTimeout(function () {
chart._render({ animate: false })
})
}
,afterrender: function(panel) {
var el = this.body,
target = el.down('.chartContainer');
target.setSize(el.getSize());
this.createChart($(target.dom));
}
});
}
,createChart: function(target) {
var c = target.dxChart({
commonSeriesSettings: {
label: {
visible: true
}
},
series: [{
data: [
{ arg: 0, val: 1 },
{ arg: 2, val: 4 },
{ arg: 4, val: 2 }]
}, {
data: [
{ arg: 1, val: 1 },
{ arg: 2.5, val: 9 },
{ arg: 3.7, val: 5.6 }]
}]
});
},
resize: function () {
console.log(resize);
}
});
Ext.create('DxChartPanel', {
renderTo: Ext.getBody()
,title: "Resizable Panel"
,height: 300
,width: 300
});
Ext.widget('window', {
autoShow: true
,title: "dxChart Window"
,width: 350
,height: 350
,layout: 'fit'
,items: [Ext.create('DxChartPanel', {
border: false
})]
});