我想将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。
有什么想法吗？我会像Highcharts for Extjs一样使用它。有可能吗？
提前致谢：）
答案 0 :(得分：1)
使用面板的html属性在面板的正文中渲染div。在面板的afterrender事件中创建图表，以便div可用。最后，在调整面板大小时，使用resize事件来调整div的大小。
见this other answer。图表库不同，但原则完全相同。
修改
我无法让图表在高度上调整大小。由于我对lib一无所知，我只是提到了support question ......但我认为这是你正在使用的图表类型的正常行为。
无论如何，这是我的代码（也在这个fiddle中）：
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
})]
});
答案 1 :(得分：1)
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
})]
});