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

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>

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

Hide / show charts in Lightning chart dashboard

lightningchart