의 ExtJS와 DevExpress의 ChartJS 내가 extjs라는 패널에 DevExpress의에서 dxChart를 포함하고 싶습니다

... 여기 의 ExtJS와 DevExpress의 ChartJS 내가 extjs라는 패널에 DevExpress의에서 dxChart를 포함하고 싶습니다

내 기본적인 방법이다 : 나는 몸 차트 아무튼에서 DIV를 제거하면

  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>

'T는 패널 :(

에 표시하지만이처럼 창 크기 차트 크기를 변경하지 않습니다. 나는 몸에 사업부를 선언하고 싶지 않아요.

어떤 아이디어? 나는 것 Extj를위한 Highcharts처럼 그것을 사용합니다. 있을 수있다? 사전에

감사합니다 :)

출처

2013-07-30 user2633804

패널의 몸에 사업부를 렌더링하는 패널의 html 속성을 사용합니다. div가 사용 가능하도록 패널의 afterrender 이벤트에서 차트를 작성하십시오. 마지막으로 패널 크기를 조정할 때 resize 이벤트를 사용하여 div의 크기를 조정하십시오.

this other answer을 참조하십시오. 차트 작성 용 lib는 다르지만 원리는 완전히 동일합니다.

편집 내가 차트를 만들 수 없습니다

은 높이 크기를 조정합니다. 이후 lib에 대해 아무것도 몰라, 난 그냥이 support question ... 언급하지만 그것은 당신이 사용하는 차트의 유형에 대한 정상적인 행동이라고 생각합니다.어쨌든

, 여기에 (이 fiddle에도,) 내 코드입니다 :

제대로 작동하려면 크기 조정 방지 rixo의 코드 만 두 가지가 있었다

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

이

는 첫째, 차트의 크기가 설정이 같은

(대신 컨테이너의 크기에 따라 계산되는) 일정한 I 라인을

size:{height:200,height:300}

을 제거했습니다

UPDATE이 : 제한 시간에 필요는 ExtJS가 실제 크기 조정하기 전에 이벤트 를 "조정"발사 몇 가지 이유에 의해,

~~둘째 없다, 크기 하나의 문제가 있었다 (그래서 컨테이너는 아직 정확히 같은 크기를 가지고)~~

실제 크기 조정 후 다시 렌더링 차트, 나는 지금 제로 간격

setTimeout(function() { chart._render({ animate: false }) })

콜에서는 setTimeout 추가 한 이 작업을 제대로 크기 조정 것으로 보인다

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

잘하셨습니다. 재미있는 점은 그 크기 선을 제거하려고했는데 차트가 렌더링되지 않았다는 것입니다. 어쩌면 내가 구문 오류를 놓쳤거나, 바이올린을로드하기 위해 충분히 오래 기다리지 않았다. 다른 재미있는 점은 코드가 완벽하게 작동한다는 것이다. FF와 Chrome의'setTimeout'도 없다. – rixo

rixo, 그건 나쁘다. setTimeout에는 실제로 필요가 없습니다. ct.setSize 호출 전에 컨테이너 높이를 테스트했습니다. –

의 ExtJS와 DevExpress의 ChartJS 내가 extjs라는 패널에 DevExpress의에서 dxChart를 포함하고 싶습니다

답변

관련 문제