我怎樣才能讓我的highcharts solid gauge具有背後的背景？

Question

我需要的款式它看起來是這樣的：

這是我得到的最接近。我遇到的麻煩是實現這種灰色背景。我試圖用CSS來完成，但由highcharts生成的html對我來說非常困難。

http://jsfiddle.net/60x7vkc2/1/

$(function() { 

    var gaugeOptions = { 

    chart: { 
     type: 'solidgauge' 
    }, 

    title: null, 

    pane: { 
     center: ['50%', '95%'], 
     size: '190%', 
     startAngle: -90, 
     endAngle: 90, 
     background: { 
     backgroundColor: '#ddd', 
     outerRadius: '100%', 
     innerRadius: '90%', 
     shape: 'arc', 
     borderColor: 'transparent', 
     } 
    }, 

    tooltip: { 
     enabled: false 
    }, 

    title: { 
     style: { 
      color: '#666', 
      fontSize: '16px', 
      fontFamily: '"Helvetica Neue", Helvetica, Arial, sans-serif' 
     } 
    }, 

    // the value axis 
    yAxis: { 
     stops: [ 
     [0.1, '#c62026'], // red 
     [0.25, '#e77525'], // orange 
     [0.75, '#70be44'] // green 
     ], 
     lineWidth: 0, 
     minorTickInterval: null, 
     tickPixelInterval: 0, 
     tickWidth: 0, 
     title: { 
     y: -50 
     }, 
     labels: { 
     y: 16 
     } 
    }, 

    plotOptions: { 
     solidgauge: { 
     innerRadius: '90%', 
     dataLabels: { 
      y: 5, 
      borderWidth: 0, 
      useHTML: true 
     }, 
     } 
    }, 

    credits: { 
     enabled: false 
    }, 
    }; 

    // ON TARGET 
    $('#ex-gauge').highcharts(Highcharts.merge(gaugeOptions, { 
    yAxis: { 
     min: 0, 
     max: 100 
    }, 

    title: { 
     text: 'Title', 
    }, 

    series: [{ 
     name: 'customers', 
     data: [63.7], 
     dataLabels: { 
     format: '<div style="text-align:center;"><span style="font-size:14px;' + 
      'black' + '">{y}%</span>' 
     } 
    }] 

    })); 
}); 

Answer 1

我加入了 「中國」 類div和創建新的CSS規則。

Fiddle demo

CSS

.prc { 
    position: relative; 
    top: 0px; 
    width: 70px; 
    height: 35px; 
    background-color: #ddd; 
    border-radius: 70px 70px 0 0; 
} 
.prc span { 
    position: relative; 
    top: 12px; 
} 

腳本

series: [{ 
     name: 'customers', 
     data: [63.7], 
     dataLabels: { 
     format: '<div class="prc" style="text-align:center;"><span style="font-size:14px;' + 
      'black' + '">{y}%</span>' 
     } 
    }]