将自定义值添加到 Lightningchart 中的 Legend

问题描述

我可以创建如下图例

有什么办法可以动态添加自定义文本来代替布林带？例如，我想在图例中每秒显示实时价格。

还有我如何以编程方式启用和禁用图例。

谢谢

解决方法

您可以存储由 legendBox.add() 方法返回的图例框条目。此 entry 有一个方法 entry.setText()，可用于将图例框条目的文本设置为您想要的任何内容。

const legendBox = chart.addLegendBox()
const entry = legendBox.add(series,undefined,'Legend Box')

entry.setText('Custom text here')

通过存储 entry 引用，您可以在想要更新文本时调用 setText 方法。

请参阅以下示例，其中每次添加新数据时都会更新图例框条目文本。

// Extract required parts from LightningChartJS.
const {
  lightningChart,DataPatterns,Themes
} = lcjs

// Import data-generator from 'xydata'-library.
const {
  createProgressiveTraceGenerator
} = xydata

// Create a XY Chart.
const chart = lightningChart().ChartXY({
  // theme: Themes.dark
})

// Create progressive line series.
const series = chart.addLineSeries({
  dataPattern: DataPatterns.horizontalProgressive
})

const lb = chart.addLegendBox()
lb.setPosition({
  x: 50,y: 50
})

const entry = lb.add(series,'Legend Box')

// Generate traced points stream using 'xydata'-library.
createProgressiveTraceGenerator()
  .setNumberOfPoints(1000)
  .generate()
  .toStream()
  .forEach(data => {
    series.add(data)
    entry.setText(`Custom text: ${series.getLastPoint().y.toFixed(1)}`)
  })

<script src="https://unpkg.com/@arction/xydata@1.4.0/dist/xydata.iife.js"></script>
<script src="https://unpkg.com/@arction/lcjs@2.2.1/dist/lcjs.iife.js"></script>

您可以通过调用 legendbox.dispose() 禁用图例框。这将完全删除图例框。要再次启用图例框，您可以调用 legendbox.restore()，这将恢复图例框原样。