2016-03-29 9 views
0

スピードメーターでスケールラベルとツールチップのラベルを削除しますか?私は0から200の間のラベルを取り除くことができますが、私が望むのは、スピードメーターのラベルの中にも、スピードメーターの真中のボックスのフィールドさえありません。助けてください。 TQ。スピードメーターでスケールラベルとツールチップのラベルを削除するには?

以下は私のコードです。

$(function() { 
 

 
    $('#container').highcharts({ 
 

 
     chart: { 
 
      type: 'gauge', 
 
      plotShadow: false 
 
     }, 
 

 
     title: { 
 
      text: '' 
 
     }, 
 

 
     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: '50%', 
 
       innerRadius: '48%' 
 
      }] 
 
     }, 
 

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

 
      
 
      title: { 
 
       text: '' 
 
      }, 
 
      plotBands: [{ 
 
       from: 0, 
 
       to: 120, 
 
       color: '#55BF3B' // green 
 
      }, { 
 
       from: 120, 
 
       to: 160, 
 
       color: '#DDDF0D' // yellow 
 
      }, { 
 
       from: 160, 
 
       to: 200, 
 
       color: '#DF5353' // red 
 
      }] 
 
     }, 
 

 
     series: [{ 
 
      name: '', 
 
      data: [80], 
 
     }] 
 

 
    }, 
 
    // Add some life 
 
    function (chart) { 
 
     
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.highcharts.com/highcharts.js"></script> 
 
<script src="https://code.highcharts.com/highcharts-more.js"></script> 
 

 
<div id="container" style="min-width: 20px; max-width: 100px; height: 100px; margin: 0 auto"></div>

答えて

2

次のことができます:

  • 削除するtooltip: {enabled: false }を追加

    • スケールのラベルを削除するには、 "Highcharts.com"
    • yAxis: { labels: { enabled: false } }を追加することを削除するcredits: { enabled: false }を追加しますツールチップ

    編集は:また

    http://api.highcharts.com/highcharts

    $(function() { 
     
    
     
        $('#container').highcharts({ 
     
    
     
         chart: { 
     
          type: 'gauge', 
     
          plotShadow: false 
     
         }, 
     
    
     
         title: { 
     
          text: '' 
     
         }, 
     
    
     
         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: '50%', 
     
           innerRadius: '48%' 
     
          }] 
     
         }, 
     
         // the value axis 
     
         yAxis: { 
     
          min: 0, 
     
          max: 200, 
     
          labels: { enabled: false }, 
     
          title: { 
     
           text: '' 
     
          }, 
     
          plotBands: [{ 
     
           from: 0, 
     
           to: 120, 
     
           color: '#55BF3B' // green 
     
          }, { 
     
           from: 120, 
     
           to: 160, 
     
           color: '#DDDF0D' // yellow 
     
          }, { 
     
           from: 160, 
     
           to: 200, 
     
           color: '#DF5353' // red 
     
          }] 
     
         }, 
     
         series: [{ 
     
          name: '', 
     
          data: [80], 
     
          dataLabels:{ enabled: false }, 
     
         }], 
     
         tooltip: {enabled: false }, 
     
         credits: { enabled: false } 
     
        }, 
     
        // Add some life 
     
        function (chart) { 
     
         
     
        }); 
     
    });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
     
    <script src="https://code.highcharts.com/highcharts.js"></script> 
     
    <script src="https://code.highcharts.com/highcharts-more.js"></script> 
     
    
     
    <div id="container" style="min-width: 20px; max-width: 100px; height: 100px; margin: 0 auto"></div>

    "80" のラベルを非表示にするあなたのセリエにdataLabels:{ enabled: false }を追加
  • 関連する問題