highcharts legend 自定义
时间: 2023-07-28 19:21:10 浏览: 176
你可以通过以下步骤自定义 Highcharts 图表的图例(legend):
1. 在图表配置中添加 `legend` 属性,设置图例的属性,例如位置、背景颜色等。例如:
```
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
backgroundColor: '#FFFFFF'
}
```
2. 在数据系列配置中,为每个系列设置 `name` 属性,用于显示在图例中。例如:
```
series: [{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}, {
name: 'New York',
data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
}]
```
3. 如果你想要自定义图例项的样式,可以通过 `legend.itemStyle` 和 `legend.itemHoverStyle` 属性设置。例如:
```
legend: {
itemStyle: {
color: '#333333',
fontWeight: 'normal'
},
itemHoverStyle: {
color: '#000000',
textDecoration: 'underline'
}
}
```
你可以根据自己的需求进行相应的修改。
阅读全文
相关推荐


















