Màu sắc của thanh kiểu dáng trong Highcharts với vấn đề về độ dốc

Question

Tôi đang cố tô màu các thanh ở vạch cao với độ dốc. Những gì tôi có là màu họ, nhưng vấn đề là, gradient đang lan rộng thông qua các nhóm dữ liệu khác hơn là mỗi thanh cá nhân, đây là một ví dụ về những gì tôi có nghĩa là:

Nếu bạn để ý, gradient đang được lan truyền giữa các thanh, thay vì tạo một cái mới cho mỗi thanh.

để gradient họ, tôi đang sử dụng:

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

Có hai cách để xác định độ dốc trong phiên bản hiện tại của highcharts . Trước đây, bạn chỉ có tùy chọn sử dụng một mảng có bốn tọa độ như linearGradient: [x1, y1, x2, y2]. Điều này sẽ làm cho các tọa độ gradient áp dụng cho các pixel và được sử dụng cho tất cả các thanh (như trong ví dụ của bạn).

Các tùy chọn mới là sử dụng một đối tượng cấu hình thay vì:

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

Các tọa độ ở đây là những con số giữa 0 và 1 tương ứng với mỗi thanh cá nhân. Vì vậy, nếu bạn thay đổi mảng bạn đã sử dụng để là một tùy chọn cấu hình (và sử dụng tọa độ chuẩn hóa), bạn sẽ nhận được gradient trong mỗi thanh.

Ví dụ trên jsfiddle

Ảnh chụp màn hình:

Edit: Và như một biểu đồ thanh có trục x đi từ trên xuống dưới bạn nên để x1 là 0 và x2 là 1, thay vì thay đổi y1 và y2.

Answer 2

Thêm Setoptions trong biểu đồ

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

Hãy thử điều này in fiddle