Могу ли я интегрировать Lightningchart JS с Ext

Question

Могу ли я интегрировать библиотеку LightningChart JS с моим решением, созданным с использованием Ext JS работы с фреймами? Можно ли отобразить диаграмму в контейнере Ext js. Ext имеет встроенные библиотеки диаграмм, но они ограничены функциональностью

Answer 1

Да, это возможно. После использования библиотеки lcjs вы можете прикрепить представление в конструкторе или в afterRender:

Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.create('Ext.container.Container', {
            layout: {
                type: 'hbox'
            },
            width: 800,
            height: 800,
            renderTo: Ext.getBody(),
            border: 1,
            items: [{
                xtype: "component",
                id: "lightning_chart",
                width: 600,
                height: 600,
                "listeners": {
                    afterRender: function () {
                        console.log(Ext.get("lightning_chart"));
                        const chart = lightningChart().ChartXY({
                                containerId: 'lightning_chart'
                            })
                            .setTitle('My first chart') // Set chart title
                        const data = [{
                            x: 0,
                            y: 1.52
                        }, {
                            x: 1,
                            y: 1.56
                        }, {
                            x: 2,
                            y: 1.42
                        }, {
                            x: 3,
                            y: 1.85
                        }, {
                            x: 4,
                            y: 1.62
                        }]

                        // Add a line series.
                        const lineSeries = chart.addLineSeries()
                            .setName('My data')
                            .add(data)
                    }
                }
            }]
        });

    }
});