highcharts 3d饼图图例为两行
时间: 2025-01-14 10:35:30 浏览: 48
### 实现 Highcharts 3D 饼图图例分两行显示
为了使 Highcharts 3D 饼图的图例能够分行显示,可以通过调整 `legend` 属性中的参数来实现。具体来说,可以利用 `layout`, `width`, 和 `itemWidth` 来控制图例项的数量以及它们如何排列。
```javascript
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'pie',
options3d: {
enabled: true,
alpha: 45
}
},
legend: {
layout: 'vertical', // 设置为垂直布局以便更好地控制每行项目数
align: 'center', // 图例居中对齐
verticalAlign: 'bottom', // 垂直方向底部对齐
itemMarginBottom: 10, // 调整图例项之间的间距
width: undefined, // 不显式设定宽度让其自适应
itemWidth: 200 // 控制单个图例项的最大宽度从而影响换行时机
},
plotOptions: {
pie: {
depth: 35 // 定义饼图厚度增加立体感
}
},
series: [{
name: 'Browser share',
data: [
['Firefox', 45.0],
['IE', 26.8],
['Chrome', 12.8],
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}]
});
```
上述代码片段展示了创建一个具有特定配置的 Highcharts 3D 饼图实例[^1]。其中关键在于设置了 `legend.layout='vertical'` 并指定了合适的 `itemWidth` 数值以确保当达到一定数量时自动折行到下一行展示剩余部分[^4]。
阅读全文
相关推荐













