Riempimento gradiente grafico spline

Question

Sto utilizzando Highcharts per la prima volta e sembra piuttosto impressionante. Comunque io sto cercando di realizzare qualcosa di simile a:

E 'possibile utilizzando Hightcharts? So che puoi aggiungere sfumature ai grafici a torta, tuttavia non riesco a trovare da nessuna parte come ottenerlo. Posso impostare l'immagine di sfondo sul grafico?

Answer 1

E 'possibile impostare un'immagine di sfondo o di gradiente utilizzando:

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

o

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 o http://api.highcharts.com/highcharts#chart.plotBackgroundColor

Tuttavia, questo è lo sfondo per l'area del tracciato , non alla linea stessa. Per dare alla linea un colore sfumato, puoi specificare il colore della serie come una sfumatura. per esempio.

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/

La sintassi per linearGradients sono:

linearGradient: [x1, y1, x2, y2] 

Crea un oggetto gradiente lineare con un punto di partenza (x1, y1) e un punto finale di (x2, y2) .

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

Specifica due punti nel gradiente e i colori da utilizzare. In questo caso, il gradiente passerà da (255,255,255) all'inizio a (100, 100, 155) e alla fine. Se hai specificato 3 stop, puoi far passare il gradiente da un colore all'altro nel mezzo, a un altro alla fine. Spero che questo ti aiuti. Ti suggerisco di provare a giocare con questo nel jsfiddle che ho postato per vedere come funziona.

Answer 2

Per impostare lo sfondo di un grafico utilizzare chart.plotBackgroundImage. Se si desidera impostare l'immagine per l'intero grafico, utilizzare gli stili CSS per il contenitore.

gradiente Per quanto riguarda, funziona, date un'occhiata: http://jsfiddle.net/Fusher/2Gzkd/3/

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