如何创建水平多行图例

Question

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

示例

Answer 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>