3

我想将 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 一样使用它。这是可能的？

提前致谢 ：）

4

2 回答 2

1

使用面板的html属性在面板的主体中呈现您的 div。在面板的事件中创建图表afterrender，以便 div 可用。最后，在resize调整面板大小时使用该事件来调整 div 的大小。

请参阅其他答案。图表库不同，但原理完全相同。

编辑

我无法让图表调整高度。由于我对库一无所知，我只是参考了这个支持问题......但我认为这是您使用的图表类型的正常行为。

无论如何，这是我的代码（也在这个小提琴中）：

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
    })]
});
于 2013-07-30T11:34:16.710 回答
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
    })]
});
于 2013-07-31T13:57:20.530 回答