我想将 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 一样使用它。这可能吗？
提前致谢:)
最佳答案
使用面板的 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
})]
});
关于jquery - Extjs 与 Devexpress ChartJS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17945445/