甜甜圈内部文本 [英] Donut Inner Text

问题描述

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

预期结果：

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] 
] 
}] 
}）; 
}）; 
  

小提琴可以在这里找到： http://jsfiddle.net/ak9jK/

解决方案

  title：{
 style：{
 fontSize：'48px'，
 fontWeight：'bold'
}，
 verticalAlign：'middle' 
}，
  

AND最后

 }，
 
函数（图表）{
 chart.setTitle（{
 text：chart.series [0]。 data [0] .y +'％'
}）; 
}）; 
  

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

相关问题：

Highcharts甜甜圈图表中的文字在悬停时变化

将文字置于饼图中心 - Highcharts

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

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