jquery - Extjs 与 Devexpress ChartJS-6ren

jquery - Extjs 与 Devexpress ChartJS

转载作者：行者123 更新时间：2023-12-01 01:24:31

25

4

我想将 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/

25

4

0

文章推荐： jquery - 将可拖动元素动画到底部

文章推荐： jquery - asp.net 与 google chrome 从数据库加载图像

extjs - 如何更改 extJS 面板内 extJS 文本字段组件的值？
我带着这么简单的问题来到这里，但找不到它......无论如何，你可以在下面看到代码。这是里面有项目的面板。我想要的是更改名称为“intIP”的文本字段的值，它位于面板内部，位于面板内部。我怎样才能做到
extjs - ExtJS 中的面包屑导航
如何在 ExtJS 设计中显示面包屑功能。我正在使用带边框布局的面板，我想在面板顶部设计面包屑功能请寄给我一些 sample ..... 提前致谢最佳答案我想到了两个解决方案。使用面板标题
extjs - EXTJS 中的嵌套网格
你好如何在 ExtJS 中设计嵌套网格请提供一些示例(如何在 ExtJS GridPanel 中使用 RowExpander) 最佳答案尝试这样的事情: //Create the Row Ex
extjs - extjs 类和命名空间的短名称
我有类似的东西 Ext.define('HS.controller.Utility', { statics : { state : 'Oklahoma' } }); 现在我想
extjs - ExtJS 4选择带有复选框标题的多个CheckColumn复选框
我有一列checkcolumn类型来启用切换 bool 值。我希望能够一次为该值切换所有行。理想情况下，我可以在checkcolumn header 中添加一个复选框，并监听更改。那可能吗？我想指出
extjs - extjs 中的更新方法错误
在我的 extjs 项目中，我有一些 panel我要展示的toolbar在 mouseEnter事件。这工作正常。但是当我用新的 html 更新面板时，mouseenter事件不起作用。 panel.
extjs - ExtJs 组合中的图标
如何在 ExtJs Combo 中显示图标和显示字段。extjs 组合是否有任何扩展。请提供一些 sample 。最佳答案对于 ExtJS4，将带有 getInnerTpl 方法的 listCon
extjs - extjs 中具有不同数据类型的相同存储
我有用于网格和柱状图的存储，但值是字符串形式的(服务器端格式化的数量，不能在客户端完成)。由于字符串格式的数量，网格没有被呈现。解决方案可能会使用网格和图表所需的数据类型制作单独的存储。但这是低效的方
extjs - ExtJS GridPanel中的垂直滚动条
我正在一个页面上有一个GridPanel的项目中工作。该面板可以显示任意数量的行，并且我设置了autoHeight属性，这将导致GridPanel扩展以适合行数。我现在想要一个水平滚动条，因为在某些分
extjs - EXTJS 网格中的小数精度
我有一个网格，它允许用户通过编辑行来输入数字。我希望数字支持 4 位小数，但它只支持 2 位。我想出了如何显示 4 位小数，但它没有注册超过 2 位小数。因此，如果用户输入 1000.1111，结果
extjs - 向网格添加工具栏 - Extjs
我这里有以下网格: Ext.define('AM.view.user.List', { extend: 'Ext.grid.Panel', alias: 'widget.userlis
extjs - Extjs 4组合框默认值
我正在将我的应用程序从ExtJs 3迁移到4版本。我的formPanel上有几个组合框，以前我用过hiddenName 以及所有的stuff提交valueField而不是displayField。
extjs - ExtJS 中适合布局的多个项目
我在一个面板中创建了多个项目。现在我想以“适合”布局显示此面板。我不想修复该面板的高度和宽度。我知道“适合”布局只允许显示一项。这里可以使用“适合”布局吗？或者有什么替代方案可以实现这一目标吗？谢
extjs - 将数据库值加载到组合框中 - EXTJS
我需要将数据库值加载到组合框中。我不明白，为什么值没有加载到组合框中。通过 firebug，打印出 console.log 值。这是我的组合框代码， var groups = new Ext.data
extjs - extjs bbar过滤器无法按需工作？
这是将筛选器动态添加到gridpanel底部工具栏的正确语法吗？ this.Grid.getBottomToolbar().plugins=[filters]; 当我这样做时没有错误。但是，它的行为并
extjs - ExtJS:以单独的格式提交日期
我正在使用ExtJS v4.0。在客户端和服务器端之间维护日期格式确实令人困惑。用户需要自己的输入格式，但是服务器通常要求提交为一种标准格式。它应该是ExtJS中的内置实现，但不是。我已经阅读
extjs - 更新编辑行 extjs
我的问题对你来说很容易，但我负担不起..我从行中获取数据并显示在其他面板的字段中我的目标是编辑这些数据并在网格中显示编辑后的数据，请给我一些建议，我知道它需要 commit() 函数但是.. 我的代码
extjs - 为网格制作良好的分页 - extJS
我是 ExtJS 的新手。我遵循了一个教程，目的是在网格上创建分页。代码很简单，我发现它很可疑......结果，分页工具栏在那里，但在第一次加载时仍然显示所有数据。这是我在 View 文件中的代码:
extjs - extjs 是如何独立于浏览器的
听说EXTJS是一个独立于浏览器的javascript库。 extjs 如何使自己独立于浏览器？当我打开库类时，我没有看到任何代码: 如果(IE)//这样做；else if (FF)//做其他事情；
extjs - ExtJS 实例中的静态方法列表
我有一个类的实例(例如 Ext.data.Model)myRecord 并且需要调用它的静态方法之一(例如 getFields())。我该怎么做？最佳答案您还可以使用 self获取类的属性: my

首页

博学

6Ren·AI

商城

jquery - Extjs 与 Devexpress ChartJS