隐藏/显示闪电图仪表板中的图表

Question

我创建了如下的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]，就像图例切换一样?

Answer 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>