在 Lightning 图表仪表板中隐藏/显示图表

如何解决在 Lightning 图表仪表板中隐藏/显示图表

我创建了如下所示的 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>