Highcharts Angular gauge - 如何刪除數據標籤中風？

Question

我有一個標準的Angular測量儀，我不知道如何從數據標籤中刪除銀色邊框（筆劃）。

使用下面的代碼，從http://www.highcharts.com/demo/gauge-speedometer

$(function() { 

    $('#container').highcharts({ 

     chart: { 
      type: 'gauge', 
      plotBackgroundColor: null, 
      plotBackgroundImage: null, 
      plotBorderWidth: 0, 
      plotShadow: false 
     }, 

     title: { 
      text: 'Speedometer' 
     }, 

     pane: { 
      startAngle: -150, 
      endAngle: 150, 
      background: [{ 
       backgroundColor: { 
        linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 }, 
        stops: [ 
         [0, '#FFF'], 
         [1, '#333'] 
        ] 
       }, 
       borderWidth: 0, 
       outerRadius: '109%' 
      }, { 
       backgroundColor: { 
        linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 }, 
        stops: [ 
         [0, '#333'], 
         [1, '#FFF'] 
        ] 
       }, 
       borderWidth: 1, 
       outerRadius: '107%' 
      }, { 
       // default background 
      }, { 
       backgroundColor: '#DDD', 
       borderWidth: 0, 
       outerRadius: '105%', 
       innerRadius: '103%' 
      }] 
     }, 

     // the value axis 
     yAxis: { 
      min: 0, 
      max: 200, 

      minorTickInterval: 'auto', 
      minorTickWidth: 1, 
      minorTickLength: 10, 
      minorTickPosition: 'inside', 
      minorTickColor: '#666', 

      tickPixelInterval: 30, 
      tickWidth: 2, 
      tickPosition: 'inside', 
      tickLength: 10, 
      tickColor: '#666', 
      labels: { 
       step: 2, 
       rotation: 'auto' 
      }, 
      title: { 
       text: 'km/h' 
      }, 
      plotBands: [{ 
       from: 0, 
       to: 120, 
       color: '#55BF3B' // green 
      }, { 
       from: 120, 
       to: 160, 
       color: '#DDDF0D' // yellow 
      }, { 
       from: 160, 
       to: 200, 
       color: '#DF5353' // red 
      }] 
     }, 

     series: [{ 
      name: 'Speed', 
      data: [80], 
      tooltip: { 
       valueSuffix: ' km/h' 
      } 
     }] 

    }, 
    // Add some life 
    function (chart) { 
     if (!chart.renderer.forExport) { 
      setInterval(function() { 
       var point = chart.series[0].points[0], 
        newVal, 
        inc = Math.round((Math.random() - 0.5) * 20); 

       newVal = point.y + inc; 
       if (newVal < 0 || newVal > 200) { 
        newVal = point.y - inc; 
       } 

       point.update(newVal); 

      }, 3000); 
     } 
    }); 
}); 

我明白我可以樣式的數據標籤中的文字，例如採取：

dataLabels: { 
    format: '<span style="font-size:18px">Consumption: {y} kWh</span>', 
    x: 0, 
    y: 50 
}, 

但我似乎無法找到一個消除中風的方法。查看它在rect-tag中寫入的屬性。

<rect x="0.5" y="0.5" width="95" height="27" fill="none" stroke="silver" stroke-width="1" rx="3" ry="3"></rect> 

有沒有辦法使用Highcharts去除這個中風？任何幫助表示讚賞！

Answer 1

如果你想從顯示dataLabel刪除邊框，您可以使用dataLabels.borderWidth參數從Highcharts API： http://api.highcharts.com/highcharts/plotOptions.series.dataLabels.borderWidth

plotOptions: { 
    series: { 
     dataLabels: { 
     borderWidth: 0 
     } 
    } 
    }, 

在這裏你可以看到一個例子是如何工作的： http://jsfiddle.net/74eqcqso/1/