css折线图添加图例

CSS折线图通常不直接支持内置的图例功能，因为它主要依赖于HTML结构和CSS样式来呈现数据点。然而，如果你想要在纯CSS或使用一些轻量级的JavaScript库（如Chart.js）创建折线图时添加图例，你可以采取以下方法：

1. **CSS + SVG**:
使用SVG元素和CSS来手动绘制折线图，并通过`<title>`、`<desc>`或`<text>`标签为每个路径添加描述作为图例。在CSS中控制这些文本的显示/隐藏。

2. **纯CSS数据可视化**:
可能需要结合CSS动画或使用CSS Grid、Flexbox布局，将不同系列的数据点放在特定的位置，然后通过CSS的`:hover`或`:focus`状态改变图例的可见性。

3. **JavaScript库**:
如Chart.js、D3.js 或 Highcharts等库提供了丰富的图表组件，可以直接配置图例选项。比如在Chart.js中，可以在实例化图表时设置`options.legend`属性。

var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
    type: 'line',
    data: yourData,
    options: {
        legend: {
            display: true, // 显示图例
            position: 'top', // 图例位置，可选值如：'top', 'bottom', 'right', 'left'
        },
    },
});