Highchart plotBands bir gauge büyütmek nasıl?

Question

Angular ve Hightchart kütüphanesi ile yapılmış bir göstergem var. Göstergede üç renkli plotBand var, ancak kene kadar büyük olmalı. ÇizimBaşlarını nasıl genişletebilir veya arka plan ile aynı şeyleri nasıl yapabilir?

var myapp = angular.module('myapp', ["highcharts-ng"]); 
myapp.controller('myctrl', function ($scope) { 
$scope.chartConfig = { 
      options: { 
     chart: { 
      type: 'gauge', 
      plotBackgroundColor: null, 
      plotBackgroundImage: null, 
      plotBorderWidth: 0, 
      plotShadow: false, 
     }, 

     title: { 
      text: 'Indice di bilanciamento' 
     }, 

     pane: { 
      startAngle: -90, 
      endAngle: 90, 
      center: ['50%', '85%'], 
      size: '140%' 

     }, 
     tooltip: { 
      enabled: false 
       } 
      }, 
    // the value axis 
    yAxis: { 
     min: 0, 
     max: 200, 

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

     tickPixelInterval: 30, 
     tickWidth: 2, 
     tickPosition: 'inside', 
     tickLength: 40, 
     tickColor: '#666', 
     labels: { 
      step: 2, 
      rotation: 'auto' 
     }, 
     title: { 
      text: 'indice' 
     }, 
     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' 
     } 
    }] 

} 
}); 

This is the jsfiddle example

Answer 1

her plotBand ait thickness özelliğini kullanmak Could:

izlenmek yapılandırma vardır.

//See: https://github.com/pablojim/highcharts-ng 
var myapp = angular.module('myapp', ["highcharts-ng"]); 

myapp.controller('myctrl', function ($scope) { 

    $scope.chartConfig = { 
       options: { 
      chart: { 
       type: 'gauge', 
       plotBackgroundColor: null, 
       plotBackgroundImage: null, 
       plotBorderWidth: 0, 
       plotShadow: false, 
      }, 

      title: { 
       text: 'Indice di bilanciamento' 
      }, 

      pane: { 
       startAngle: -90, 
       endAngle: 90, 
       center: ['50%', '85%'], 
       size: '140%' 

      }, 
      tooltip: { 
       enabled: false 
        } 
       }, 
     // the value axis 
     yAxis: { 
      min: 0, 
      max: 200, 

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

      tickPixelInterval: 30, 
      tickWidth: 2, 
      tickPosition: 'inside', 
      tickLength: 40, 
      tickColor: '#666', 
      labels: { 
       step: 2, 
       rotation: 'auto' 
      }, 
      title: { 
       text: 'indice' 
      }, 
      plotBands: [{ 
        thickness: 40, 
       from: 0, 
       to: 120, 
       color: '#55BF3B', // green 
      }, { 
        thickness: 40, 
       from: 120, 
       to: 160, 
       color: '#DDDF0D' // yellow 
      }, { 
        thickness: 40, 
       from: 160, 
       to: 200, 
       color: '#DF5353' // red 
      }] 
     }, 
     series: [{ 
      name: 'Speed', 
      data: [80], 
      tooltip: { 
       valueSuffix: ' km/h' 
      } 
     }] 

    } 

}); 

Güncelleme fiddle