您的位置:首页 > 其它

hightchart饼状图图例、内容放置在饼上

2017-08-15 09:54 555 查看
$(function () {

    $('#container').highcharts({

        chart: {

            plotBackgroundColor: null,

            plotBorderWidth: null,

            plotShadow: false

        },

        title: {

            text: null

        },

        legend: {

            layout: 'vertical',

            align: 'left', //水平方向位置 

            horizontalAlign:'center',

            labelFormatter: function () {

                return this.name + ':'+this.percentage+'%';

            }

        },

        tooltip: {

            headerFormat: '{series.name}<br>',

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

        },

        plotOptions: {

            pie: {

                allowPointSelect: true,

                cursor: 'pointer',

                depth: 30,

                dataLabels: {

                    enabled: true,

                    color:'black',

                    connectorWidth:0,

                    connectorPadding:0,

                    distance:-30,formatter:function(){

                        return '<b>'+this.point.name+'</b>:'+this.point.percentage.toFixed(2)+"%";

                    },

                },

                showInLegend: true

            }

        },

        series: [{

            type: 'pie',

            name: '浏览器访问量占比',

            data: [

                ['Firefox',   45.0],

                ['IE',       26.8],

                {

                    name: 'Chrome',

                    y: 12.8,

                    sliced: true,

                    selected: true

                },

                ['Safari',    8.5],

                ['Opera',     6.2],

                ['其他',   0.7]

            ]

        }]

    });

});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: