Wypełnienie gradientu splajnu

Question

Używam Highcharts po raz pierwszy i wydaje się to imponujące. Jednak staram się osiągnąć coś podobnego do:

Jest to możliwe dzięki zastosowaniu Hightcharts? Wiem, że możesz dodawać gradienty do wykresów kołowych, ale nie mogę nigdzie znaleźć sposobu, w jaki to osiągnąć. Czy mogę ustawić obraz tła na wykresie?

Answer 1

Jest możliwe, aby ustawić obraz tła lub gradient, używając:

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

lub

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

Jednak jest to tło do powierzchni działki , nie do samej linii. Aby nadać linii kolor gradientu, możesz określić kolor serii jako gradient. na przykład

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/

Składnia linearGradients są:

linearGradient: [x1, y1, x2, y2] 

Tworzy się liniową przedmiotu gradientu z punktu startowego (x1, y1) i punkt końcowy (x2, y2) .

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

Określa dwa punkty gradientu i kolory do użycia. W tym przypadku gradient przejdzie od (255,255,255) na początku do (100, 100, 155) i do końca. Jeśli określono 3 przystanki, możesz zmienić kolor z jednego koloru na inny na środku, a drugi na końcu. Mam nadzieję że to pomoże. Sugeruję, że po prostu spróbujesz zagrać z tym w jsfiddle, które napisałem, aby zobaczyć, jak to działa.

Answer 2

Aby ustawić tło wykresu, użyj chart.plotBackgroundImage. Jeśli chcesz ustawić obraz dla całego wykresu, użyj stylów CSS dla kontenera.

chodzi gradient, to działa, spójrz: http://jsfiddle.net/Fusher/2Gzkd/3/

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