Highchart如何在儀表中放大plotBands？

我有用Angular和Hightchart庫製作的測量圖表。該儀表有三個彩色plotBands，但我需要他們是大蜱。如何放大plotBands或用背景製作相同的東西？Highchart如何在儀表中放大plotBands？

它具有如下配置：

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

來源

2016-04-12 Zauker

能使用每個plotBand的thickness財產。

//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' 
      } 
     }] 

    } 

});

更新fiddle

來源

2016-04-12 09:36:50 apokryfos

Highchart如何在儀表中放大plotBands？

回答

相關問題