$(function () {
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: null
},
legend: {
layout: 'vertical',
align: 'left', //水平方向位置
horizontalAlign:'center',
labelFormatter: function () {
return this.name + ':'+this.percentage+'%';
}
},
tooltip: {
headerFormat: '{series.name}<br>',
pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
depth: 30,
dataLabels: {
enabled: true,
color:'black',
connectorWidth:0,
connectorPadding:0,
distance:-30,formatter:function(){
return '<b>'+this.point.name+'</b>:'+this.point.percentage.toFixed(2)+"%";
},
},
showInLegend: true
}
},
series: [{
type: 'pie',
name: '浏览器访问量占比',
data: [
['Firefox', 45.0],
['IE', 26.8],
{
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true
},
['Safari', 8.5],
['Opera', 6.2],
['其他', 0.7]
]
}]
});
});
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: null
},
legend: {
layout: 'vertical',
align: 'left', //水平方向位置
horizontalAlign:'center',
labelFormatter: function () {
return this.name + ':'+this.percentage+'%';
}
},
tooltip: {
headerFormat: '{series.name}<br>',
pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
depth: 30,
dataLabels: {
enabled: true,
color:'black',
connectorWidth:0,
connectorPadding:0,
distance:-30,formatter:function(){
return '<b>'+this.point.name+'</b>:'+this.point.percentage.toFixed(2)+"%";
},
},
showInLegend: true
}
},
series: [{
type: 'pie',
name: '浏览器访问量占比',
data: [
['Firefox', 45.0],
['IE', 26.8],
{
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true
},
['Safari', 8.5],
['Opera', 6.2],
['其他', 0.7]
]
}]
});
});