饼图实例

$(function () {

    var chart;

var totalMoney=50000

    $(document).ready(function() {

        chart = new Highcharts.Chart({

            chart: {

                renderTo: 'pie_chart',

                plotBackgroundColor: 'white',//背景颜色

                plotBorderWidth: 0,

                plotShadow: false

            },

            title: {

                text: 'Total:$'+totalMoney,

verticalAlign:'bottom',

y:-60

            },

            tooltip: {//鼠标移动到每个饼图显示的内容

                pointFormat: '{point.name}: <b>{point.percentage}%</b>',

                percentageDecimals: 1,

formatter: function() {

                    return this.point.name+':$'+totalMoney*this.point.percentage/100;

                }

            },

            plotOptions: {

                pie: {

size:'60%',

borderWidth: 0,

                    allowPointSelect: true,

                    cursor: 'pointer',

                    dataLabels: {

enabled: true,

                    color: '#000',

distance: -50,//通过设置这个属性，将每个小饼图的显示名称和每个饼图重叠

style: {

fontSize: '10px',

lineHeight: '10px'

},

formatter: function(index) {

                            return  '<span style="color:#00008B;font-weight:bold">' + this.point.name + '</span>';

                       }

                  },

padding:20

                }

            },

            series: [{//设置每小个饼图的颜色、名称、百分比

                type: 'pie',

                name: null,

                data: [

                    {name:'Base salary',color:'#3DA9FF',y:65},

{name:'Health insurance',color:'#008FE0',y:20},

{name:'Company matched',color:'#00639B',y:10},

{name:'Others',color:'#CBECFF',y:5}

                ]

            }]

        });

    });

    

});