将JavaScript图表放在extjs窗口中 [英] Putting javascript charts inside an extjs window

问题描述

如何将外部JavaScript图表（如flot或jqplot）放在extjs窗口中？我知道我可以使用extj提供的图表，但是我想在窗口内放一个flot或者jqplot图表。

解决方案

p>只要按照Chris的说法（你为什么不把它作为一个答案呢？）// @

这是一个完整的例子：

在jsFiddle上生活（请务必查看外部资源选项卡; Flot代码来自他们的基本例子）。

  Ext.onReady（function（）{
 Ext.widget（'window'，{ 
 autoShow：true 
，shadow：false 
，title：Flot in ExtJS
，resizable：true 
，margin：10 
，width： 600 
，height：350 
 
，html：'< div class =demo-container>'
 +'< div id =placeholderclass = demo-placeholder>< / div>'
 +'< / div>'
 
，listeners：{
 resize ：function（panel）{
 panel.body.down（'。demo-container'）。setSize（panel.body.getSize（））; 
} 
，afterrender：function（panel）{
 var el = this.body; 
 el.down（'。demo-container'）。setSize（el.getSize（））; 
 
 var d1 = []; （var i = 0; i <14; i + = 0.5）
 {
 d1.push（[i，Math.sin（i）]）; 
} 
 var d2 = [[0,3]，[4,8]，[8,5]，[9,13]]; 
 var d3 = [[0，12]，[7，12]，null，[7，2.5]，[12，2.5]]; 
 
 $ .plot（＃placeholder，[d1，d2，d3]）; 
} 
} 
}）; 
}）; 
  

How would I put an external javascript chart, like one from flot or jqplot, inside an extjs window? I know that I could use the charts that extjs provides, but i want to put a flot or jqplot chart inside the window instead.

解决方案

Just do as Chris said (why didn't you post it as an answer, dude?).

Here's a complete example:

Live on jsFiddle (be sure to check the "External Resource" tab; Flot code is from their basic example).

Ext.onReady(function() {
    Ext.widget('window', {
        autoShow: true
        ,shadow: false
        ,title: "Flot in ExtJS"
        ,resizable: true
        ,margin: 10
        ,width: 600
        ,height: 350

        ,html: '<div class="demo-container">'
            + '<div id="placeholder" class="demo-placeholder"></div>'
            + '</div>'

        ,listeners: {
            resize: function(panel) {
                panel.body.down('.demo-container').setSize(panel.body.getSize());
            }
            ,afterrender: function(panel) {
                var el = this.body;
                el.down('.demo-container').setSize(el.getSize());

                var d1 = [];
                for (var i = 0; i < 14; i += 0.5) {
                    d1.push([i, Math.sin(i)]);
                }
                var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];
                var d3 = [[0, 12], [7, 12], null, [7, 2.5], [12, 2.5]];

                $.plot("#placeholder", [ d1, d2, d3 ]);
            }
        }
    });
});

这篇关于将JavaScript图表放在extjs窗口中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！