Fill gradient gradient biểu đồ

Question

Tôi đang sử dụng Highcharts lần đầu tiên và nó có vẻ khá ấn tượng. Tuy nhiên tôi đang cố gắng để đạt được một cái gì đó tương tự như:

Có thể bằng cách sử dụng Hightcharts? Tôi biết bạn có thể thêm gradient vào biểu đồ hình tròn, tuy nhiên tôi không thể tìm thấy bất cứ nơi nào làm cách nào để đạt được điều đó. Tôi có thể đặt hình nền cho biểu đồ không?

Answer 1

Có thể thiết lập một hình nền hoặc Gradient sử dụng:

chart: { 
     type: 'line', 
     plotBackgroundImage: 'http://www.highcharts.com/demo/gfx/skies.jpg' 
    }, 

hoặc

chart: { 
     type: 'line', 
     plotBackgroundColor: { 
      linearGradient: [0, 0, 500, 500], 
      stops: [ 
       [0, 'rgb(255, 255, 255)'], 
       [1, 'rgb(200, 200, 255)'] 
      ] 
     } 
    }, 

http://api.highcharts.com/highcharts#chart.plotBackgroundImage hoặc http://api.highcharts.com/highcharts#chart.plotBackgroundColor

Tuy nhiên, đây là nền vào vùng âm mưu , không phải cho chính dòng đó. Để cung cấp cho một dòng màu tốt nghiệp, bạn có thể chỉ định màu sắc của loạt là một gradient. ví dụ.

series: [{ 
     data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4], 
     color: { 
      linearGradient: [0, 0, 0, 500], 
      stops: [ 
       [0, 'rgb(255, 255, 255)'], 
       [1, 'rgb(100, 100, 155)'] 
      ] 
     } 
    }] 

http://jsfiddle.net/wXqM9/

Cú pháp cho linearGradients là:

linearGradient: [x1, y1, x2, y2] 

Tạo một đối tượng Linear Gradient với một điểm khởi đầu của (x1, y1) và điểm cuối (x2, y2) .

stops: [ 
       [0, 'rgb(255, 255, 255)'], 
       [1, 'rgb(100, 100, 155)'] 
      ] 

Điều này chỉ định hai điểm trong độ dốc và màu sắc để sử dụng. Trong trường hợp này, gradient sẽ chuyển từ (255.255.255) vào đầu (100, 100, 155) và kết thúc. Nếu bạn chỉ định 3 điểm dừng, thì bạn có thể làm cho gradient chuyển từ màu này sang màu khác ở giữa, sang màu khác ở cuối. Hi vọng điêu nay co ich. Tôi đề nghị bạn chỉ cần thử chơi xung quanh với điều này trong jsfiddle tôi đăng để xem nó hoạt động như thế nào.

Answer 2

Để đặt nền của biểu đồ sử dụng chart.plotBackgroundImage. Nếu bạn muốn đặt hình ảnh cho toàn bộ biểu đồ, hãy sử dụng kiểu CSS cho vùng chứa.

Về gradient, nó hoạt động, hãy xem: http://jsfiddle.net/Fusher/2Gzkd/3/

 color: { 
      linearGradient: { 
       x1: 0, 
       y1: 0, 
       x2: 0, 
       y2: 1 
      }, 
      stops: [ 
       [0, 'red'], 
       [0.5, 'green'], 
       [1, 'blue'] 
      ] 
     },