半圆甜甜圈图 highchart，里面嵌入了文本

Question

我正在使用 Highcharts js，我正在尝试使用 highCharts 绘制饼图这是一个半圆，里面嵌入了一些文字。

和到目前为止，我所做的是

我的 html 标记是

    <div class="row">
        <div class="col-md-4 col-sm-4 col-xs-4">
            <div id="trends-pie-chart-1" class="trends-pie-chart">
                            <!-- draw pie chart here -->
            </div>
        </div>
        <div class="col-md-4 col-sm-4 col-xs-4">
            <div id="trends-pie-chart-2" class="trends-pie-chart">
                <!-- draw pie chart here -->
            </div>
        </div>
        <div class="col-md-4 col-sm-4 col-xs-4">
            <div id="trends-pie-chart-3" class="trends-pie-chart">
                    <!-- draw pie chart here -->
            </div>
        </div>
    </div>

css 使用

.trends-pie-chart {
width: 100%;
margin-bottom: 30px;
}

并使用了 Js

 // Create the chart for Microsoft office
 var chart_completion = new Highcharts.Chart({
    chart: {
    renderTo: 'trends-pie-chart-1',
    type: 'pie',
    margin: [60,10,10,10]
},
colors: ['#fcfcfc', '#F4E998'] ,
tooltip: {
    enabled: false,
},
plotOptions: {
    pie: {
        slicedOffset: 0,
        size: '50%',
        dataLabels: {
            enabled: false
        }
    },
    series: noBorder
}, 
title: {
    text: 'Microsoft Office',
    align: 'center',
    verticalAlign: 'bottom',
    y : 10,
    style: {
        fontSize: '2em'
    }
},  
credits: {
    enabled: false
},
series: [{
    name: 'Browsers',
    data: [["",25],[,75]],
    innerSize: '60%',
    showInLegend:false,
    dataLabels: {
        enabled: false
    },
    states:{
        hover: {
            enabled: false
        }
    }
}]
},function (chart) { // on complete
chart.renderer.text('42 K Users', 140, 200)
.css({
    color: '#9BA0A2',
    fontSize: '2em',
  zIndex:100000
})
.add();

});
    // Create the chart for azure
    var chart_time = new Highcharts.Chart({
        chart: {
            renderTo: 'trends-pie-chart-2',
            type: 'pie',
            margin: [60,10,10,10]
        },
        colors: ['#fcfcfc', '#3EC1F9'] ,

        plotOptions: {
            pie: {
                slicedOffset: 0,
                size: '50%',
                dataLabels: {
                    enabled: false
                }
            },
            series : noBorder
        },
        tooltip: {
            enabled: false,
        },
        title: {
            text: 'Azure',
            align: 'center',
            verticalAlign: 'bottom',
            y : 10,
            style: {
                fontSize: '2em'
            }

        },
        credits: {
            enabled: false
        },
        series: [{
            name: 'Browsers',
            data: [["",25],[,75]],
            innerSize: '60%',
            showInLegend:false,
            dataLabels: {
                enabled: false
            },
            states:{
                hover: {
                    enabled: false
                }
            }
        }]
    });
    // Create the chart for Cloud Storage
    var chart_budget = new Highcharts.Chart({
        chart: {
            renderTo: 'trends-pie-chart-3',
            type: 'pie',
            margin: [60,10,10,10]
        },
        colors: ['#fcfcfc', '#6355FC'] ,
        plotOptions: {
            pie: {
                slicedOffset: 0,
                size: '50%',
                dataLabels: {
                    enabled: false
                }
            },
            series: noBorder
        },
        title: {
            text: 'Cloud Storage',
            align: 'center',
            verticalAlign: 'bottom',
            y : 10,
            style: {
                fontSize: '2em'
            } 
        },
        tooltip: {
            enabled: false,
            animation: false,
            backgroundColor: null
        },

        credits: {
            enabled: false
        },
        series: [{
            name: 'Browsers',
            data: [["",25],[,75]],
            innerSize: '60%',
            showInLegend:false,
            dataLabels: {
                enabled: false
            },
            states:{
                hover: {
                    enabled: false
                }
            }
        }]
    });
    /*pie charts trends page*/
   var noBorder = { 
    states:{
        hover:{
            halo: {
            size: 1
            }     
       }
      }
  };

Answer 1

这看起来像是一个 z-index 问题。但是，我有更好的解决方案。不确定是否有帮助：

.wrap {position: relative; z-index: 1; width: 150px; height: 150px;}
.wrap span {top: 0; right: 0; width: 50%; line-height: 95px; background-color: #fff; z-index: 5; position: absolute; text-align: center; font-size: 2em; height: 50%; overflow: hidden;}
.wrap .outer-circle,
.wrap .inner-circle {position: absolute; border-radius: 100%; background-color: #00f; top: 0; bottom: 0; left: 0; right: 0; z-index: 2; margin: 25px;}
.wrap .inner-circle {background-color: #fff; z-index: 3;}

<div class="wrap">
  <span>75%</span>
  <div class="outer-circle">
    <div class="inner-circle"></div>
  </div>
</div>

预览：

Answer 2

您可以使用 .attr() 更改文本的 zIndex： http://api.highcharts.com/highcharts#Element.attr

chart.renderer.text('42 K Users', 140, 200)
  .css({
    color: '#9BA0A2',
    fontSize: '2em',
  }).attr({
    zIndex: 5
  })
  .add();

它将起作用，因为您的文本是 svg/vml 对象。

示例： http://jsfiddle.net/dL6rebf5/22/

半圆甜甜圈图 highchart，里面嵌入了文本

semi circle donut chart highchart with text embedded inside

html

css

text

highcharts

donut-chart