2016-09-20 8 views
0

私は標準的な角度ゲージを持っています。データラベルから銀色の境界線(ストローク)を取り除く方法がわかりません。ハイチャート角度計 - データラベルのストロークを削除するには?

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

しかし、私は見つけることができないよう:私は、たとえば、データ・ラベル内のテキストのスタイルを設定することができます理解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); 
     } 
    }); 
}); 

から取った次のコードを使用して、

ストロークを取り除く方法。ソースを見ると、rectタグの属性として書かれています。

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

ハイチャートを使用してこのストロークを削除する方法はありますか?どんな助けもありがとう!

答えて

2

あなたが表示さdataLabelからボーダーを削除したい場合は、あなたがHighcharts APIからdataLabels.borderWidthパラメータを使用することができます。ここでは http://api.highcharts.com/highcharts/plotOptions.series.dataLabels.borderWidth

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

あなたはそれが動作する方法の例を見ることができます: http://jsfiddle.net/74eqcqso/1/

+0

素晴らしい解決策は、魅力のように動作します! :) –

+0

_really?_....... – zamebit

関連する問題