显示所有标签或自定义没有在gstatic饼图中显示的标签

时间:2018-04-25 06:29:11

标签: javascript google-visualization

我正在使用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);
}

attached image

0 个答案:

没有答案