EXTJS與DevExpress的ChartJS

我想從DevExpress的嵌入dxChart進入ExtJS的面板...EXTJS與DevExpress的ChartJS

這裏是我的基本嘗試：

  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 「T出現在面板:(

但是這樣它不與窗口大小更改圖表的大小。我不想申報DIV在體內。

任何想法？我想使用它像Highcharts Extjs。這是可能的？

感謝提前:)

來源

2013-07-30 user2633804

用面板的html屬性呈現在面板的身體你的股利。在面板的afterrender事件中創建圖表，以便div可用。最後，在面板調整大小時，使用resize事件調整div的大小。

參見this other answer。圖表庫不同，但原理完全相同。

編輯

我不能讓圖調整高度。由於我對這個庫一無所知，我只是提到了這個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 
    })] 
});

來源

2013-07-30 11:34:16 rixo

感謝rixo，調整大小不工作：/圖表只回應如果我改變瀏覽器的大小... – user2633804

Devexpress不是開源的，所以我無法測試自己。如果你用你的代碼更新你的問題，也許我可以發現什麼是錯的。 – rixo

http://chartjs.devexpress.com是免費的:) ChartJS – user2633804

裏面只有兩件事情rixo的代碼，防止調整到正常工作：

首先，圖表的大小設置爲常數（基於容器的大小進行計算，而不是）

我已經刪除線

size:{height:200,height:300}

UPDATE：有大小爲一個單一的問題，存在超時無需

其次，由於某種原因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-31 13:57:20

做得好。有趣的是，我試圖刪除這個尺寸的線，而圖表沒有渲染。也許我錯過了語法錯誤，或者沒有足夠長的時間來加載小提琴......另一個有趣的事情是，即使沒有'setTimeout'（在FF和Chrome，Linux中），您的代碼對我來說也是完美的。 – rixo

rixo，這是我的不好; setTimeout中確實沒有必要。我在ct.setSize調用之前測試了容器的高度 –

EXTJS與DevExpress的ChartJS

回答

相關問題