Degrade sorunu olan Highchart'ta stil bar renkleri

Question

Grafikleri yüksek gradlarda bir degrade ile renklendirmeye çalışıyorum.

fark ederseniz

, gradyan: Ne var onları boyama, ama sorun degrade diğer veri gruplarının yerine tek tek her çubuğu üzerinden yayılıyor, burada, ne demek istediğimi bir örnek Her biri için yeni bir tane oluşturmak yerine çubuklar arasında yayılıyor.

onları degrade için, ben kullanıyorum:

colors: [ 
     { 
     linearGradient: [500, 0], 
     stops: [ 
      [0, 'rgb(247, 111, 111)'], 
      [1, 'rgb(220, 54, 54)'] 
     ] 
    }, 
     { 
     linearGradient: [500, 0], 
     stops: [ 
      [0, 'rgb(120, 202, 248)'], 
      [1, 'rgb(46, 150, 208)'] 
     ] 
    }, 
    { 
     linearGradient: [500, 0], 
     stops: [ 
      [0, 'rgb(136, 219, 5)'], 
      [1, 'rgb(112, 180, 5)'] 
     ] 
    },], 

Answer 1

deneyin . Önceden sadece linearGradient: [x1, y1, x2, y2] gibi dört koordinatlı bir dizi kullanma seçeneğiniz vardı. Bu, gradyan koordinatlarının piksellere uygulanmasını sağlar ve tüm çubuklar için kullanılabilir (örneğinizde olduğu gibi). Burada

linearGradient: { 
    x1: 0, 
    y1: 0, 
    x2: 1, 
    y2: 0 
} 

koordinatları 0 ve her bir çubuğa karşılık gelen 1 arasında sayılardır:

yeni seçenek yerine içeren bir konfigürasyon nesnesini kullanmaktır. Dolayısıyla, diziyi değiştirirseniz, bir yapılandırma seçeneği olursunuz (ve normalleştirilmiş koordinatları kullanın), her çubuğa gradyanlar alırsınız.

Örnek üzerinde jsfiddle

Ekran Görüntüsü:

Düzenle: izin vermeli yukarıdan aşağıya doğru gidiş x eksenini sahip bir çubuk grafik olarak Ve x1 0 ve x2 olmak Y1 ve y2'yi değiştirmek yerine 1 olun.

Answer 2

grafikte setOptions Ekle

Highcharts.setOptions({ 
      colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572',  '#FF9655',    '#FFF263', '#6AF9C4'] 
      }); 

Highcharts geçerli sürümünde renk geçişlerini belirleyerek iki yolu vardır bu in fiddle