tôi muốn có biểu đồ hình tròn với các thẻ dữ liệu bên trong và bên ngoài một chiếc bánh. tôi biết, với khoảng cách phủ định, nó sẽ hiển thị nhãn bên trong chiếc bánh. nhưng tôi muốn nó bên trong và bên ngoài. bên ngoài tôi muốn hiển thị phần trăm và bên trong tổng số tiền của điểm.Dữ liệu bánh xe HighchartsVòng bên trong và bên ngoài
Trả lời
Bạn không có khả năng đặt hai mốc dữ liệu, nhưng bạn có thể sử dụng cách giải quyết khác, điều này không hoàn hảo nhưng có thể sẽ hữu ích. Vì vậy, bạn có thể thiết lập sử dụngHTML, sau đó trong formater trả về hai divs, datalabel thích hợp đầu tiên (bên ngoài) và thứ hai với bên trong. Sau đó đặt id với bộ đếm xác định id của mỗi div là duy nhất, sau đó chỉ những gì bạn cần là đặt CSS phù hợp. Ví dụ về nhãn dữ liệu vị trí một sẵn có tại đây: http://jsfiddle.net/4RKF4/
$(function() {
var chart,
counter = 0;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Browser market shares at a specific website, 2010'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage}%</b>',
percentageDecimals: 1
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
useHTML:true,
formatter: function() {
counter++;
return '<div class="datalabel"><b>'+ this.point.name +'</b>: '+ this.percentage +' %</div><div class="datalabelInside" id="datalabelInside'+counter+'"><b>'+ this.point.name +'</b>: '+ this.percentage +' %</div>';
}
}
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Firefox', 45.0],
['IE', 26.8],
{
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true
},
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}]
});
});
});
phong cách CSS:
.datalabelInside {
position:absolute;
}
#datalabelInside1 {
color:#fff;
left:-150px;
}
Tôi đã thử nghiệm trong chrome và fiddle của bạn không hoạt động , thực ra. Nó chỉ với tôi? –
có một công việc dễ dàng arround cho nó
được bạn che phủ 2 bánh với datalabels khác nhau
$(function() {
// Create the chart
$('#container').highcharts({
chart: {
type: 'pie',
backgroundColor: 'rgba(0,0,0,0)',
y:100
},
title: {
text: 'sfs '
},
yAxis: {
title: {
text: ' '
}
},
plotOptions: {
pie: {
// y:1,
shadow: false,
// center: ['50%', '50%'],
borderWidth: 0,
showInLegend: false,
size: '80%',
innerSize: '60%'
,
data: [
['allo', 18],
['asdad', 14],
['asdad', 11],
['asdasd', 10],
['adad', 8],
['asdada', 7],
['adada ada', 7],
['adad', 5],
['asdas',7],
['ada', 3]
]
}
},
tooltip: {
valueSuffix: '%'
},
series: [
{
type: 'pie',
name: 'Browser share',
dataLabels: {
color:'white',
distance: -20,
formatter: function() {
if(this.percentage!=0) return Math.round(this.percentage) + '%';
}
}
},
{
type: 'pie',
name: 'Browser share',
dataLabels: {
connectorColor: 'grey',
color:'black',
// y:-10,
softConnector: false,
connectorWidth:1,
verticalAlign:'top',
distance: 20,
formatter: function() {
if(this.percentage!=0) return this.point.name;
}
}
}
]
});
});
Vui lòng hiển thị một số mã. – FrediWeber
Bài đăng này có thể hữu ích cho bạn https://stackoverflow.com/questions/15235666/highcharts-pie-chart-add-text-inside-each-slice/29063822#29063822 – TechnoCrat