Extjs с DevExpress ChartJS

Я хотел бы, чтобы встроить dxChart из DevExpress в 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 из тела диаграммы Безразлично «т появляются на панели :(

Но, как это не изменить размер диаграммы с размером окна. Я не хочу, чтобы объявить DIV в теле.

Любые идеи? Я бы использовать его как Highcharts для Extjs. Возможно?

Заранее спасибо :)

источник

2013-07-30 user2633804

Используйте 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 
    })] 
});

источник

2013-07-30 11:34:16 rixo

Благодаря Rixo, на изменение размера не работает:/графика только отвечает, если я изменяю размер браузера ... – user2633804

Devexpress не является открытым исходным кодом, поэтому я не могу проверить себя. Если вы обновите свой вопрос своим кодом, возможно, я смогу определить, что случилось. – rixo

http://chartjs.devexpress.com is free :) 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

Риксо, это было мое плохое; в setTimeout действительно нет необходимости. Я проверил высоту контейнера перед вызовом ct.setSize –

Extjs с DevExpress ChartJS

ответ

Смежные вопросы