大家好,我有一个图例格式的饼图,如下所示:
{
enabled: true,
labelFormatter: function() {
return this.name + ' (Gesamt: ' + this.y + ' - ' + this.percentage.toFixed(1) + '%)' ;
},
borderWidth: 1
};
[在某些特定情况下,我需要在此图例框中添加一个我定义为text ='Extra'的额外文本。其余的传说我仍然保留在盒子里。我怎样才能做到这一点 ?
我的jsfiddle代码:http://jsfiddle.net/wjnnt28p/
您可以添加一些if条件,并根据需要显示文本。
例如
labelFormatter: function() {
var p = this.name + ' (Gesamt: ' + this.y + ' - ' + this.percentage.toFixed(1) + '%)';
if (this.name == 'Chrome') { // Test the name
return p + ' Other Text for Chrome';
} else {
return p;
}
}
完整示例:
$(function () {
$(document).ready(function () {
var text = 'Extra';
// Build the chart
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Browser market shares January, 2015 to May, 2015'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
legend: {
enabled: true,
labelFormatter: function () {
var p = this.name + ' (Gesamt: ' + this.y + ' - ' + this.percentage.toFixed(1) + '%)';
if (this.name == 'Chrome') { // Test the name
return p + ' Other Text for Chrome';
} else {
return p;
}
},
borderWidth: 1
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Microsoft Internet Explorer',
y: 56.33
}, {
name: 'Chrome',
y: 24.03,
sliced: true,
selected: true
}, {
name: 'Firefox',
y: 10.38
}, {
name: 'Safari',
y: 4.77
}, {
name: 'Opera',
y: 0.91
}, {
name: 'Proprietary or Undetectable',
y: 0.2
}]
}]
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
更新2 fiddle with empty series,extra legend(最新启用了数据标签)
[您快到了,用这个>>在您的系列数据中添加“ extra”之类的字段。
更新
labelFormatter: function() {
if(this.extra !=null){
return this.name + ' ('+this.extra+': ' + this.y + ' - ' + this.percentage.toFixed(1) + '%)' ;
}else{
return this.name + '(' + this.y + ' - ' + this.percentage.toFixed(1) + '%)' ;
}}
放置if条件以摆脱undefined。
根据下面的评论
创建一个名称为“ Extra”的空系列OR如下所示
labelFormatter: function() { if(this.y ==null) return "Extra Legend"; jsfiddle.net/wjnnt28p/4
要点是,当您设置图例格式时,如果y没有任何值,它将显示未定义的文本。 (空序列的情况),用于在那里写条件逻辑。
第二种解决方法是返回“额外标签”,但是此图例的单击将没有数据,因此可以替换legendclick。