我可以将 LightningchartJS 与 Ext 集成吗
Can i integrate LightningchartJS with Ext
我可以将 LightningChartJS 库与我使用 ExtJS 框架构建的解决方案集成吗?是否可以在 Extjs 容器中显示图表。 Ext 内置图表库,但功能有限
是的,这是可能的。在需要 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)
}
}
}]
});
}
});
我可以将 LightningChartJS 库与我使用 ExtJS 框架构建的解决方案集成吗?是否可以在 Extjs 容器中显示图表。 Ext 内置图表库,但功能有限
是的,这是可能的。在需要 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)
}
}
}]
});
}
});