Highcharts 中文社区

Highcharts 中文社区 门户 HC 学院 查看内容

环形图标题居中显示的方法

2016-9-13 16:32| 发布者: 彭芳| 查看: 2713| 评论: 0

摘要: 对于环形图,让图表标题(或其他文字标签)居中显示是很常见的需求;
一、效果1

1、结果


 
2、实现代码

$(function () {
    $('#container').highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            spacing : [10, 0 , 40, 0]
           
        },
        title: {
            floating:true,
            text: '圆心显示的标题'
            
            
        },
        tooltip: {
            pointFormat: '{series.name}: {point.percentage:.1f}%'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    format: '{point.name}: {point.percentage:.1f} %',
                    style: {
                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                    }
                },
                events: {
                    click:function(e) {
                        var url = e.point.url;
                        if(url) {
                        window.location.href=url;
                        }
                    }
                }
            }
        },
        series: [{
            type: 'pie',
            innerSize: '70%',
            name: 'Browser share',
            data: [
                {name:'Firefox',   y: 45.0, url : 'http://bbs.hcharts.cn'},
                ['IE',       26.8],
                {
                    name: 'Chrome',
                    y: 12.8,
                    sliced: true,
                    selected: true,
                    url: 'http://www.hcharts.cn'
                },
                ['Safari',    8.5],
                ['Opera',     6.2],
                ['Others',   0.7]
            ]
        }]
    }, function(c) {
        // 环形图圆心
        var centerX = c.series[0].center[0];
        var centerY = c.series[0].center[1];
       
        // 标题字体大小,返回类似 16px ,所以需要 parseInt 处理
        var titleHeight = parseInt(c.title.styles.fontSize);   
        
        // 设置图表偏移
        c.setTitle({
            y: centerY + titleHeight/2
        });
    });
});





二、效果2


相对于整个表(包括提示)居中

$(function() {

    var chart = new Highcharts.Chart({

        chart: {

            renderTo: 'container',

            type: 'pie'

        },

        plotOptions: {

            pie: {

                innerSize: '40%'

            }

        },

        title: {

            text: ''

        },

        series: [{

            data: [

                ['Firefox', 6062],

                ['IE6', 1000],

                ['Ch2', 1986]

                ]}]

    },  

    function(chart) { // on complete

        var textX = chart.plotLeft + (chart.series[0].center[0]);

        var textY = chart.plotTop  + (chart.series[0].center[1]);

        var span = '';

        span += 'upper';

        span += 'Lower';

        span += '';

        $("#addText").append(span);

        span = $('#pieChartInfoText');

        span.css('left', textX + (span.width() * -0.5));

        span.css('top', textY + (span.height() * -0.5));

    });

});


路过

雷人

握手

鲜花

鸡蛋

最新评论

返回顶部