Contents
  1. 1. highcharts饼图/图例文字过长
    1. 1.1. 图例文案过长解决
    2. 1.2. 饼图文字过长解决

highcharts饼图/图例文字过长

因为某些原因,highcharts绘制的饼图上显示的文字或图例文字过长导致显示错乱问题。

错误❌截图如下:

图例文字过长

饼图上的显示文字过长

图例文案过长解决

图例控制在 legend 中.

1
2
3
4
5
6
7
8
9
10
11
12
13
labelFormatter: function () {
var legendMsg;
legendMsg = '<a title="' + this.name + '">';
if (this.name.length > 5) {
legendMsg += (this.name).substring(0, 3);
legendMsg += '...';
legendMsg += (this.name).substring(this.name.length - 2, this.name.length);
} else {
legendMsg += this.name;
}
legendMsg += '</a>';
return legendMsg;
}

完整的legend配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
var legend = {
//图例位置
layout: 'vertical', //显示形式,支持水平horizontal和垂直vertical
align: 'right', //对其方式,默认为center
verticalAlign: 'top',
borderWidth: 0,
itemStyle: {
'fontSize': '10px',
'font-family': 'Microsoft YaHei'
},
useHTML: true, //必须要设为TRUE,默认为FALSE
labelFormatter: function () {
var legendMsg;
legendMsg = '<a title="' + this.name + '">';
if (this.name.length > 5) {
legendMsg += (this.name).substring(0, 3);
legendMsg += '...';
legendMsg += (this.name).substring(this.name.length - 2, this.name.length);
} else {
legendMsg += this.name;
}
legendMsg += '</a>';
return legendMsg;
}
};

饼图文字过长解决

饼图上显示的数据和文案在 plotOptions 里控制.

1
2
3
4
5
6
7
8
9
formatter: function() {
var text;
if (this.point.name.length > 3) {
text = '<a title="' + this.point.name + '">' + this.point.name.substring(0, 2) + '</a>';
} else {
text = this.point.name;
}
return text + ": " + this.percentage.toFixed(2) + "%";
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
var plotOptions = {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
useHTML: true, //必须要添加
maxStaggerLines: 1,
//format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black',
fontFamily: 'Microsoft YaHei',
fontSize: '8px'
},
formatter: function () {
var text;
if (this.point.name.length > 3) {
text = '<a title="' + this.point.name + '">' + this.point.name.substring(0, 2) + '</a>';
} else {
text = this.point.name;
}
return text + ": " + this.percentage.toFixed(2) + "%";
}

},
showInLegend: true //图例
}
};

参考API:

https://api.hcharts.cn/highcharts#legend.labelFormatter

https://api.hcharts.cn/highcharts#plotOptions.pie.dataLabels.formatter

附:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
//绘制饼图完整方法

angular.module('xxModule').factory('xxxService', function(){
return {

//method xxx...

_createPie: function(Title, documentID, arrayData) {
var chart = {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
};
var title = Title;

var tooltip = {
shared: true,
useHTML: true,
style: {
color: 'orange',
fontSize: '8px',
fontWeight: 'normal',
fontFamily: 'Microsoft YaHei'
},
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
};
var plotOptions = {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
useHTML: true,
maxStaggerLines: 1,
//format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black',
fontFamily: 'Microsoft YaHei',
fontSize: '8px'
},
formatter: function() {
var text;
if (this.point.name.length > 3) {
text = '<a title="' + this.point.name + '">' + this.point.name.substring(0, 2) + '</a>';
} else {
text = this.point.name;
}
return text + ": " + this.percentage.toFixed(2) + "%";
}

},
showInLegend: true //图例
}
};
var legend = {
//图例位置
layout: 'vertical', //显示形式,支持水平horizontal和垂直vertical
align: 'right', //对其方式,默认为center
verticalAlign: 'top',
borderWidth: 0,
itemStyle: {
'fontSize': '10px',
'font-family': 'Microsoft YaHei'
},
useHTML: true,
labelFormatter: function() {
var legendMsg;
legendMsg = '<a title="' + this.name + '">';
if (this.name.length > 5) {
legendMsg += (this.name).substring(0, 3);
legendMsg += '...';
legendMsg += (this.name).substring(this.name.length - 2, this.name.length);
} else {
legendMsg += this.name;
}
legendMsg += '</a>';
return legendMsg;
}
};
var series = [{
type: 'pie',
name: '百分比: ',
data: arrayData
}];
var credits = {
enabled: false
};

var json = {};
json.chart = chart;
json.title = title;
json.tooltip = tooltip;
json.series = series;
json.plotOptions = plotOptions;
json.legend = legend;
json.credits = credits;
$(documentID).highcharts(json);
}

//method xxxx...
};
});

    
        
        版权声明:
        本文由Lomo创作和发表,采用署名(BY)-非商业性使用(NC)-相同方式共享(SA)国际许可协议进行许可,
        转载请注明作者及出处,本文作者为Lomo,本文标题为highcharts plotOptions issue.
    
    


 Leave a message ^_^:

Contents
  1. 1. highcharts饼图/图例文字过长
    1. 1.1. 图例文案过长解决
    2. 1.2. 饼图文字过长解决