javascript - 我可以将 LightningchartJS 与 Ext 集成吗

Question

我可以将 LightningChartJS 库与使用 ExtJS 框架构建的解决方案集成吗？是否可以在 Extjs 容器中显示图表。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)
                    }
                }
            }]
        });

    }
});