问题描述
我创建了如下所示的 3 个行图
var charts = [];
const db = lightningChart().Dashboard({
numberOfRows: 3,numberOfColumns: 1
})
charts[0] = db.createChartXY({
columnIndex: 0,rowIndex: 0,columnSpan: 1,rowSpan: 1,})
similiarly for charts[1] and charts[2]
无论如何我们可以隐藏图表[0]并显示1和2,或者以编程方式显示2并隐藏图表[0]和图表[1],就像图例切换一样?
解决方法
目前实现此目的的唯一方法是将图表放置在单元格中,然后在同一单元格上创建一个新图表。这意味着每次要更改可见图表时,您都需要能够从头开始创建图表。
要删除现有图表,您可以在图表上调用 dispose()
。
chart.dispose()
然后您可以创建要显示的图表。您很可能希望创建一个函数来为您创建图表。
const createChart1 = () => {
const chart = dashboard.createChartXY({
columnIndex: 0,rowIndex: 0
})
chart.setTitle('Chart 1')
return chart
}
const {
lightningChart,} = lcjs
const lc = lightningChart()
const dashboard = lc.Dashboard({
numberOfColumns: 1,numberOfRows: 2
})
const createChart1 = () => {
const chart = dashboard.createChartXY({
columnIndex: 0,rowIndex: 0
})
chart.setTitle('Chart 1')
return chart
}
const createChart2 = () => {
const chart = dashboard.createChartXY({
columnIndex: 0,rowIndex: 0
})
chart.setTitle('Chart 2')
return chart
}
const createChart3 = () => {
const chart = dashboard.createChartXY({
columnIndex: 0,rowIndex: 1
})
chart.setTitle('Chart 3')
return chart
}
// Initially have charts 1 and 3 on the dashboard
let c1 = createChart1()
const c3 = createChart3()
// After a timeout change the chart on the first row to chart 2
setTimeout(() => {
// Dispose to remove the chart 1
c1.dispose()
// Create the chart 2 on the place of chart 1
c1 = createChart2()
},1000)
<script src="https://unpkg.com/@arction/lcjs@2.2.1/dist/lcjs.iife.js"></script>