highcharts 시작 Pie: Pie 케이크 모양의 그림에 백분율을 표시하는 방법 (회전)

3098 단어 HighCharts
하이차트의 파이 모양 그림에서 백분율을 어떻게 표시하는지 물어보는 사람들이 많다. 끊임없이 궁리한 끝에 간단한 설정만 하면 이런 수요를 실현할 수 있다는 결론을 얻었다.
전체 핵심 코드는 다음과 같습니다.
$(function () {
            var chart;
            // highcharts 
            $(document).ready(function () {

                // Build the chart
                chart = new Highcharts.Chart({
                    chart: {
                        renderTo: 'container',// id
                        plotBackgroundColor: null,
                        plotBorderWidth: null,
                        plotShadow: false
                    },
                    title: {
                        text: 'highcharts (Legend) '
                    },
                    tooltip: {
                        pointFormat: '{series.name}: {point.percentage}%',
                        percentageDecimals: 1 // 
                    },
                    plotOptions: {
                        pie: {
                            allowPointSelect: true, // 
                            cursor: 'pointer',
                            dataLabels: {
                                enabled: true //   
                            },
                            showInLegend: true
                        }
                    },
                    legend: {
                        layout: 'vertical',
                        backgroundColor: '#FFFFFF',
                        floating: true,
                        align: 'left',
                        verticalAlign: 'top',
                        x: 90,
                        y: 45,
                        labelFormatter: function () {
                            return this.name + '('+this.percentage+'%)';
                        }
                    },
                    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]
                ]
                    }]
                });
            });

        });

중량:
주로 Legend 레이블 내에서 표시 이름을 포맷해야 합니다.
legend: {
                        layout: 'vertical',
                        backgroundColor: '#FFFFFF',
                        floating: true,
                        align: 'left',
                        verticalAlign: 'top',
                        x: 90,
                        y: 45,
                        labelFormatter: function () {
                            return this.name + '('+this.percentage+'%)';// 
                        }
                    },

좋은 웹페이지 즐겨찾기