2013-03-21 3 views
0

Highcharts 계기를 사용하려고합니다. plotband를 선형 그래디언트로 설정하는 방법이 있습니까? 내 게이지의 값이 0-100이면 플롯 밴드가 0에서 빨간색으로 50에서 노란색으로 100에서 녹색으로 바뀌길 원합니다.그라데이션 플롯 밴드가있는 Highchart의 계기

각 정지 점에 대해 개별적인 플롯 밴드 섹션을 생성 할 수 있다고 생각했습니다. , 1-100). 그러나 만약 훨씬 더 깨끗해질 수있는 선형성을 설정하는 방법이 있다면. 어느 누구도 방법을 압니까?

답변

1

예, 가능합니다. 신중하게 색상, linearGradients을 chosing하여

yAxis: { 
     min: 0, 
     max: 100, 
     plotBands: [{ 
      color: { 
       linearGradient: [300, 300, 0, 0], 
       stops: [ 
        [0, 'rgb(255, 255, 255)'], 
        [1, 'rgb(150, 200, 155)'] 
       ] 
      }, 
      from: 0, 
      to: 100 
     }], 
    }, 

http://jsfiddle.net/fsQZ7/

과에 /에서, 당신은 당신이 원하는 일을하기 위해 여러 plotbands을 결합 할 수 있어야한다 :이 같은 것을보십시오.

http://www.highcharts.com/docs/chart-design-and-style/colors

예에

0

읽기 "선형 그라디언트"녹색 노란색에서 빨간색 :

plotBands: [{ 
    from: 0, 
    to: 29, 
    color: '#DDDF0D' // yellow 
},{ 
    from: 29, 
    to: 40, 
    color: { 
     linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 }, 
     stops: [ 
      [0, '#55BF3B'], //green 
      [1, '#DDDF0D'] //yellow 
     ] 
    } 
}, { 
    from: 40, 
    to: 51, 
    color: { 
     linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 }, 
     stops: [ 
      [0, '#55BF3B'], //green 
      [1, '#DF5353'] //red 
     ] 
    } 
}, { 
    from: 51, 
    to: 80, 
    color: '#DF5353' //red 
}]