在 lightningchart 中为 Legend 添加自定义值

Question

我可以创造如下图例

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

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

谢谢

Answer 1

您可以存储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, undefined, '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。要再次启用 legendbox，您可以调用 legendbox.restore()，这将恢复 legendbox 的原样。

在 lightningchart 中为 Legend 添加自定义值

Add custom values to Legend in lightningchart

lightningchart