设置legend样式首先设置showInLegend: true
,Highcharts设置显示legend.
在Highcharts中,你可以通过设置legend.itemStyle
属性来改变图例的样式。以下是如何设置图例图标为方块并设置字体样式的示例:
legend: {
symbolHeight: 12,
symbolWidth: 12,
symbolRadius: 0, // 设置为0使图标变为方块
itemStyle: {
'font-size': '14px',
'font-family': 'MiSans',
'font-weight': '400',
color: '#FFFFFF',
opacity: 0.6
}
}
在上述代码中,symbolHeight
和symbolWidth
属性用于设置图例图标的大小,symbolRadius
属性设置为0使图标变为方块。itemStyle
属性用于设置图例文本的样式,包括字体大小、字体家族、字体权重、颜色和透明度。
完整实例代码
drawLine() {
var that = this;
var chart = highcharts.chart(this.className, {
backgroundColor: 'rgba(0,0,0,0)',
colors: ['rgba(37, 221, 236, 1)', 'rgba(55, 160, 232, 1)', 'rgba(233, 75, 32, 1)', 'rgba(241, 154, 60, 1)', 'rgba(51, 79, 255, 1)', 'rgba(104, 242, 84, 1)'],
chart: {
type: 'pie',
backgroundColor: 'rgba(0,0,0,0)',
options3d: {
enabled: true,
alpha: 70,
beta: 0
}
},
title: {
text: ''
},
credits: {
enabled: false
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
legend: {
symbolHeight: 12,
symbolWidth: 12,
symbolRadius: 0, // 设置为0使图标变为方块
itemStyle: {
'font-size': '14px',
'font-family': 'MiSans',
'font-weight': '400',
color: '#FFFFFF',
opacity: 0.6
}
},
plotOptions: {
pie: {
allowPointSelect: true,
animation: true,
cursor: 'pointer',
showInLegend: true, // 添加这一行
depth: 25,
size: '50%',
center: ['50%', '50%'],
dataLabels: {
useHTML: true,
enabled: true,
format: '<div class="dataLabels"><b>{point.name}</b>: {point.y}</div>',
style: {
color: 'rgba(26, 178, 255, 1)'
}
},
}
},
series: [{
type: 'pie',
name: '展示',
data: this.dataList
}]
});
}