如何创建水平多线图例？

Question

是否可以添加水平多线图例？

example

Answer 1

这可以通过为图例中的每一行创建 1 个图例框并将它们放置在列布局中来完成。

这是一个代码片段。

const { lightningChart, UIDraggingModes, emptyLine, emptyFill, UILayoutBuilders, UIOrigins, LegendBoxBuilders } = lcjs;

const chart = lightningChart().ChartXY()
  .setTitle('')
  .setPadding({ top: 110 })

const seriesList = new Array(11).fill(0).map((_, i) => {
  const series = chart.addLineSeries()
    .setName(`Trend #${i+1}`)
    .addArrayY(new Array(20).fill(0).map(_ => Math.random()))
  return series
})

const legendLayout = chart.addUIElement(UILayoutBuilders.Column)
  .setPosition({ x: 0, y: 100 })
  .setOrigin(UIOrigins.LeftTop)
  .setMargin(10)
  .setDraggingMode(UIDraggingModes.disabled)

const legendList = new Array(4).fill(0).map(_ => {
  const legend = legendLayout.addElement(LegendBoxBuilders.HorizontalLegendBox)
    .setTitle('')
    .setMargin(0)
    .setPadding(0)
  return legend
})

legendList[0].add(seriesList[0])
legendList[0].add(seriesList[1])
legendList[0].add(seriesList[2])
legendList[0].add(seriesList[3])
legendList[1].add(seriesList[4])
legendList[1].add(seriesList[5])
legendList[1].add(seriesList[6])
legendList[2].add(seriesList[7])
legendList[2].add(seriesList[8])
legendList[2].add(seriesList[9])
legendList[3].add(seriesList[10])

<script src="http://unpkg.com/@arction/lcjs@3.1.0/dist/lcjs.iife.js"></script>

如何创建水平多线图例？

How to create horizontal multiline legend?

lightningchart