iOS 16 Swift Charts中的自定义图例

vfh0ocws  于 2023-03-07  发布在  Swift
关注(0)|答案(2)|浏览(241)

如何获取彩色图像,或者更一般地说,获取每个图例条目的样式信息,以便在Swift Charts的图表中构建自定义图例?
这里有一个图表,图例位于右侧,但是使用chartLegendcontent:参数不会将任何信息传递到闭包中以供使用。我希望将图例 Package 到滚动视图中,这样当条目太多时,图表将正确显示在屏幕上,用户可以滚动查看图表下方的图例。

Chart(points, id: \.self) { point in
     LineMark(
          x: .value("time/s", point.timestamp),
          y: .value("potential/mV", point.potential)
    )
    .foregroundStyle(by: .value("Electrode", point.electrode.symbol))
}
.chartLegend(position: .bottom)
// ...

以下图表中图例条目过多,影响了图表大小,导致裁剪:

这是一个只有几个条目的图表,这样图表的大小就正确了,没有裁剪,图例中有文本可以区分它们所代表的电极:

任何帮助都将不胜感激。

bxfogqkk

bxfogqkk1#

不滚动,但图表图例可以放在旁边,代码如下:

.chartLegend(position: .trailing, alignment: .top)

这为图例提供了更多空间。图例不会滚动,但所有项都将列出,即使超出图表的结尾。框架高度可以增加。该示例显示了before(默认)和after(使用上面的代码)。

可以在图表结束后使用chartForegroundStyleScale手动指定颜色,如下所示:

.chartForegroundStyleScale([
        "Hong Kong": Color.green,
        "London": Color.red,
        "Taipei": Color.purple,
        "New York": Color.teal,
        "Paris": Color.pink,
        "Sydney": Color.orange
    ])

可根据系列创建符号:

.symbol(by: .value("City", series.city))

xwmevbvl

xwmevbvl2#

除了定位(另一个答案),您完全可以自由选择图例显示的内容:

.chartLegend(position: .bottom) {
    HStack {
        Text("Value 1")
        Text("Value 2")
    }
}

这有助于克服空间限制,或以粗体突出显示某个值,或在图例中显示类似曲线最大值的内容。

相关问题