Датчик Highchart с градиентной полосой

Question

Я пытаюсь использовать Highcharts gauge. Есть ли способ установить линейный градиент линейного градиента? Если мой датчик имеет значение от 0 до 100, я хочу, чтобы полоса графика переключилась с красного на 0 на желтый с 50 на зеленый на 100.

Я думал, что я мог бы просто генерировать индивидуальные участки полосы для каждой точки остановки , 1-100, но если бы был способ установить линейный гранд, который был бы намного чище. Кто-нибудь знает дорогу?

Answer 1

Да, это возможно. Попробуйте что-то вроде этого:

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/

Тщательно они выбрали ваши цвета, linearGradients и от/к, вы должны быть в состоянии объединить несколько plotbands делать то, что вы хотите.

Answer 2

чтения "" линейных градиентов на

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

Пример: от желтого до зеленого до красного:

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