本文介绍了甜甜圈内部文本的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我使用高图库开发了一个甜甜圈图表。我需要在甜甜圈的内部包含一个标签。



预期结果:



JS:

  $(function(){
$('#container8')。highcharts({
图:{
type:'pie',
options3d:{
enabled:false,
alpha:0
}
},
颜色:['#081969','#0e2569','#1e3b81','#284893','#30509b'],
标题:{
text:''
}, tooltip:{
enabled:false
},
plotOptions:{
pie:{
innerSize:140,
depth:45
}
},
系列:[{
name:'Delivered amount',
data:[
['56%',56],
['44%',44]
]
}]
});
});

小提琴可以在这里找到:

解决方案
  title:{
style:{
fontSize:'48px',
fontWeight:'bold'
},
verticalAlign:'middle'
},

AND最后

 },

函数(图表){
chart.setTitle({
text:chart.series [0]。 data [0] .y +'%'
});
});

DEMO



相关问题:




I developed a donut chart using highchart library. I need to include a label in the inner part of the donut.

Expected Result:

JS:

$(function () {
    $('#container8').highcharts({
        chart: {
            type: 'pie',
            options3d: {
                enabled: false,
                alpha: 0
            }
        },
        colors: ['#081969', '#0e2569', '#1e3b81', '#284893', '#30509b'],
        title: {
            text: ''
        },tooltip: {
            enabled: false
        },
        plotOptions: {
            pie: {
                innerSize: 140,
                depth: 45
            }
        },
        series: [{
            name: 'Delivered amount',
            data: [
                ['56%', 56],
                ['44%', 44]
            ]
        }]
    });
});

Fiddle can be found here: http://jsfiddle.net/ak9jK/

解决方案
title: {
        style: {
            fontSize: '48px',
            fontWeight: 'bold'
        },
        verticalAlign: 'middle'
    },

AND at the end

},

function (chart) {
    chart.setTitle({
        text: chart.series[0].data[0].y + '%'
    });
});

DEMO: http://jsfiddle.net/ak9jK/1/

Related questions:
Highcharts Donut Chart text in center change on hover
Place text in center of pie chart - Highcharts

这篇关于甜甜圈内部文本的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

11-01 00:28