Go go-chart 怎样给多个序列添加图例

在 Go go-chart 中给多个序列添加图例，关键不是再创建一种特殊的“图例序列”，而是给每个序列设置有意义的 Name，再把 chart.Legend(&c) 放进同一个 Chart 的 Elements。这样图例会读取 Chart.Series 中各序列的名称和样式，和折线一起参与渲染。

官方地址：https://pkg.go.dev/github.com/wcharczuk/go-chart/v2

下面用“销售额、成本、用户数”三个 ContinuousSeries 做例子。示例重点是对象关系和可维护的命名，配图是原创静态说明图，不是 go-chart 的运行截图。

图例文字从哪里来：先给每个序列设置 Name

go-chart 的 Series 接口要求序列能够返回名称、坐标轴类型、样式并参与渲染。对常见折线图来说，ContinuousSeries 直接提供了 Name、XValues 和 YValues。因此多个序列的图例文字，首先取决于每个序列的 Name 是否存在且能区分业务含义。

不要把“序列在切片中的下标”当作图例名称。下标只适合内部排序，读者真正需要看到的是“销售额”“成本”“用户数”这样的业务名。go-chart 会根据序列和默认调色板绘制对应的颜色，图例中的线段或色块也会跟着序列样式变化。

创建多个 ContinuousSeries 并保持数据对齐

每个序列都要有自己的 XValues 和 YValues。如果三条线共用同一组月份或日期，可以复用同一组 X 值；Y 值仍然要放在各自序列中。下面的代码没有依赖本地数据文件，便于把注意力集中在图例所需的字段上。

package main

import (
    "fmt"
    "os"

    chart "github.com/wcharczuk/go-chart/v2"
)

func main() {
    xValues := []float64{1, 2, 3, 4, 5}

    c := chart.Chart{
        Title: "业务指标",
        Series: []chart.Series{
            chart.ContinuousSeries{
                Name:    "销售额",
                XValues: xValues,
                YValues: []float64{42, 55, 61, 74, 88},
            },
            chart.ContinuousSeries{
                Name:    "成本",
                XValues: xValues,
                YValues: []float64{28, 34, 37, 45, 52},
            },
            chart.ContinuousSeries{
                Name:    "用户数",
                XValues: xValues,
                YValues: []float64{18, 25, 39, 47, 63},
            },
        },
    }

    // 把图例作为额外的可渲染元素，序列本身仍放在 Chart.Series 中。
    c.Elements = []chart.Renderable{chart.Legend(&c)}

    // 创建输出文件后及时关闭，避免文件描述符在批量导出时累积。
    output, err := os.Create("metrics.png")
    if err != nil {
        panic(fmt.Errorf("创建图片文件失败: %w", err))
    }
    defer output.Close()

    // PNG renderer 负责输出格式，Chart.Render 负责绘制序列和图例。
    renderer, err := chart.PNG(900, 560)
    if err != nil {
        panic(fmt.Errorf("创建 PNG 渲染器失败: %w", err))
    }
    if err := c.Render(renderer, output); err != nil {
        panic(fmt.Errorf("渲染图表失败: %w", err))
    }
}

这段代码中，Name 是图例显示的核心字段，Series 的顺序也决定了图例项目的观察顺序。若业务数据是动态生成的，可以在组装序列时统一规范名称，避免出现空字符串或多个序列使用同一个名称。

把 chart.Legend 放进 Chart.Elements

Chart.Series 和 Chart.Elements 负责两类不同对象：前者描述要绘制的数据序列，后者放置标题、图例等额外的可渲染元素。chart.Legend(&c) 返回一个 chart.Renderable，所以要把它加入 c.Elements，而不是追加到 c.Series。

如果程序先创建图表，再根据配置决定是否展示图例，可以按条件设置 Elements。要注意传入的指针必须指向最终要渲染的同一个 Chart；不要复制一份临时图表给 Legend，然后再渲染另一份对象，否则图例读取的序列集合可能和最终画面不一致。

序列较多时怎样选择图例布局

go-chart 提供了三个常用入口：

替换方式很简单，例如把默认图例改为左侧布局：

// 序列名称较长时，用左侧图例减少顶部横向拥挤。
c.Elements = []chart.Renderable{chart.LegendLeft(&c)}

// 需要更紧凑的空间时，可以改用 Thin 布局。
// c.Elements = []chart.Renderable{chart.LegendThin(&c)}

如果同时放置多个自定义元素，要把它们放进同一个 Elements 切片，并根据画布空间调整顺序。图例布局函数只负责生成图例渲染器，不会替你修正过长、重复或空白的序列名称。

导出 PNG 或 SVG 时的检查顺序

图例并不绑定某一种图片格式。Chart.Render 接收 renderer 和输出流，PNG、SVG 都可以沿用同一组 Series 与 Elements。导出前可以按下面顺序排查：

1. 确认每个序列的 Name 非空，并且名称能区分业务指标。
2. 确认这些序列都在最终 Chart.Series 中，而不是只保存在外部切片。
3. 确认 chart.Legend(&c) 或其他布局函数已经加入最终 Chart 的 Elements。
4. 确认渲染时使用的对象就是设置过图例的那个 Chart。
5. 若图例挤压了绘图区，再在 Legend、LegendLeft 和 LegendThin 之间调整。

最常见的“图例不显示”并不是 renderer 的问题，而是忘记给序列设置 Name，或者把 Legend 错放进了 Series。先检查对象边界，再考虑颜色和布局，定位会更快。

小结

Go go-chart 给多个序列添加图例可以归纳为三步：为每个 ContinuousSeries 设置稳定、可读的 Name；把这些序列放进 Chart.Series；再把 chart.Legend(&c)、LegendLeft 或 LegendThin 放进同一个 Chart 的 Elements。最后用 PNG 或 SVG renderer 调用 Chart.Render，图例就会和序列一起输出。

相关问题

为什么设置了三条线，图例却没有文字？

优先检查三条序列的 Name 是否为空；图例文字来自序列名称，不是来自变量名。

Legend 应该放在 Series 里吗？

不应该。序列放进 Chart.Series，图例是额外的可渲染元素，应放进 Chart.Elements。

序列名称太长导致图例拥挤怎么办？

先选择 LegendLeft 或 LegendThin，再缩短名称中的重复前缀，保持每项仍能独立识别。