我正在使用gstatic(谷歌图表)库来创建饼图,我需要为饼图中的所有切片添加切片标签。默认情况下,它不会显示小切片。如何在不降低标签字体大小的情况下显示gstatic饼图中所有切片的标签?
google.charts.load('current', {'packages': ['corechart']});
google.charts.setOnLoadCallback(drawChart);
// Draw the chart and set the chart values
function drawChart() {
var totalOutstandingData = [
['Card Product', 'Amount']
]
var totalOutstandingCount = 0;
var outstandingOptions;
$.each(jData.totalOutstanding, function (key, value) {
totalOutstandingData.push([
key, {v: parseInt(value), f: (parseInt(value) * 100 / parseInt(jData.totalOutstandingSum)).toFixed(2) + "%"}
])
if (value != 0 && value != null) {
totalOutstandingCount++;
}
});
if (totalOutstandingCount == 0) {
totalOutstandingData.push(
['', {v: 1, f: 'Zero Outstanding'}]
)
// Optional; add a title and set the width and height of the chart
outstandingOptions = {'title': 'Total Outstanding', 'width': 1000,
'height': 400, // show formatted value from the data
pieSliceText: 'value',
// default text style is white
// won't show in center unless change color
pieSliceTextStyle: {
color: '#9e9e9e'
},
colors: ['transparent'],
pieSliceBorderColor: '#9e9e9e',
backgroundColor: 'transparent'
};
} else {
outstandingOptions = {
'title': 'Total Outstanding',
'width': 1000,
'height': 400,
'legend': {textStyle: {fontweight: "bold", fontSize: 10}},
backgroundColor: 'transparent',
pieSliceText: 'value',
sliceVisibilityThreshold: 0.01,
tooltip: {
showColorCode: true,
text: 'value'
}
};
}
var outstandingChartData = google.visualization.arrayToDataTable(totalOutstandingData);
var outstandingChart = new google.visualization.PieChart(document.getElementById('totalOutstandingPie'));
outstandingChart.draw(outstandingChartData, outstandingOptions);
}