2016-03-29 10 views
0

Ölçek etiketi etiketini ve hız ölçerdeki araç ipucunu kaldırmak istiyorum? Etiketi 0 ile 200 arasında kaldırmayı başarıyorum ancak istediğim şey hızölçerin ortasında kutu alanı bile hız göstergesi üzerinde etiket olmamasıdır. Lütfen yardım et. TQ.Hız göstergesi üzerindeki ölçek etiketi ve araç ipucu etiketi nasıl kaldırılır?

Kodum aşağıda.

$(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>

cevap

2

Şunları yapabilirsiniz:

  • kaldırmak için tooltip: {enabled: false } eklemek

    • ölçekli etiketini kaldırmak için "Highcharts.com"
    • yAxis: { labels: { enabled: false } } eklemek kaldırmak credits: { enabled: false } eklemek tooltip

    Düzenleme: aynı zamanda "80" gizlemek için serisine ait dataLabels:{ enabled: false } eklemek etiket

    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>