javascript - 如何在动态图中使用 highcharts 应用渐变。

Question

<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>











var chart;


  $(document).ready(function () {
    chart = new Highcharts.Chart({
        chart : {
          renderTo : 'container',
          type : 'line',
          backgroundColor : {
            linearGradient : [0,0, 0, 0],
            stops : [
              [0, 'rgb(256, 256, 256)'],
              [1, 'rgb(0, 0, 0)']
            ]
          }
        },
        title : {
          text : 'Snow depth in the Vikjafjellet mountain, Norway'
        },
        subtitle : {
          text : 'An example of irregular time data in Highcharts JS'
        },
        xAxis : {
          type : 'datetime',
          dateTimeLabelFormats : { // don't display the dummy year
            month : '%e. %b',
            year : '%b'
          }
        },
        yAxis : {
          title : {
            text : 'Snow depth (m)'
          },
          min : 0
        },
        tooltip : {
          formatter : function () {
            return '<b>' + this.series.name + '</b><br/>' +
            Highcharts.dateFormat('%e. %b', this.x) + ': ' + this.y + ' m';
          }
        },
        plotOptions : {
          area : {
            lineWidth : 1,
            marker : {
              enabled : false,
              states : {
                hover : {
                  enabled : true,
                  radius : 5
                }
              }
            },
            shadow : false,
            states : {
              hover : {
                lineWidth : 1
              }
            }
          }
        },

        series : [{
            name : 'Winter 2007-2008',
            type : "area",
            fillOpacity:0,
            fillColor : {
              linearGradient : [0, 0, 0, 300],
              stops : [
                [0, Highcharts.getOptions().colors[0]],
                [1, 'rgba(256,256,256,256)']
              ]
            },
            // Define the data points. All series have a dummy year
            // of 1970/71 in order to be compared on the same x axis. Note
            // that in JavaScript, months start at 0 for January, 1 for February etc.
            data : [
              [Date.UTC(1970, 9, 27), 0],
              [Date.UTC(1970, 10, 10), 0.6],
              [Date.UTC(1970, 10, 18), 0.7],
              [Date.UTC(1970, 11, 2), 0.8],
              [Date.UTC(1970, 11, 9), 0.6],
              [Date.UTC(1970, 11, 16), 0.6],
              [Date.UTC(1970, 11, 28), 0.67],
              [Date.UTC(1971, 0, 1), 0.81],
              [Date.UTC(1971, 0, 8), 0.78],
              [Date.UTC(1971, 0, 12), 0.98],
              [Date.UTC(1971, 0, 27), 1.84],
              [Date.UTC(1971, 1, 10), 1.80],
              [Date.UTC(1971, 1, 18), 1.80],
              [Date.UTC(1971, 1, 24), 1.92],
              [Date.UTC(1971, 2, 4), 2.49],
              [Date.UTC(1971, 2, 11), 2.79],
              [Date.UTC(1971, 2, 15), 2.73],
              [Date.UTC(1971, 2, 25), 2.61],
              [Date.UTC(1971, 3, 2), 2.76],
              [Date.UTC(1971, 3, 6), 2.82],
              [Date.UTC(1971, 3, 13), 2.8],
              [Date.UTC(1971, 4, 3), 2.1],
              [Date.UTC(1971, 4, 26), 1.1],
              [Date.UTC(1971, 5, 9), 0.25],
              [Date.UTC(1971, 5, 12), 0]
            ]
          }, {
            name : 'Winter 2008-2009',
            type : "area",
            fillColor : {
              linearGradient : [0, 0, 0, 200],
              stops : [
                [0, Highcharts.getOptions().colors[1]],
                [1, 'rgba(2,0,0,0)']
              ]
            },
            data : [
              [Date.UTC(1970, 9, 18), 0],
              [Date.UTC(1970, 9, 26), 0.2],
              [Date.UTC(1970, 11, 1), 0.47],
              [Date.UTC(1970, 11, 11), 0.55],
              [Date.UTC(1970, 11, 25), 1.38],
              [Date.UTC(1971, 0, 8), 1.38],
              [Date.UTC(1971, 0, 15), 1.38],
              [Date.UTC(1971, 1, 1), 1.38],
              [Date.UTC(1971, 1, 8), 1.48],
              [Date.UTC(1971, 1, 21), 1.5],
              [Date.UTC(1971, 2, 12), 1.89],
              [Date.UTC(1971, 2, 25), 2.0],
              [Date.UTC(1971, 3, 4), 1.94],
              [Date.UTC(1971, 3, 9), 1.91],
              [Date.UTC(1971, 3, 13), 1.75],
              [Date.UTC(1971, 3, 19), 1.6],
              [Date.UTC(1971, 4, 25), 0.6],
              [Date.UTC(1971, 4, 31), 0.35],
              [Date.UTC(1971, 5, 7), 0]
            ]
          }
        ]
      });
  });

我在 jsfiddle 中获得了所需的渐变(通过上面的代码)，但在任何网络浏览器中都没有显示相同的内容。我使用的是 highcharts v 3.0.7。我可以应用背景渐变，但可以应用单独的图形渐变未在网络浏览器中应用。 谢谢。

Answer 1

您似乎没有正确设置图表背景的 LinearGradient。尝试这样的事情:

chart : {
      renderTo : 'container',
      type : 'line',
      backgroundColor : {
        linearGradient : [0,0, 0, 300],
        stops : [
          [0, 'rgb(256, 256, 256)'],
          [1, 'rgb(0, 0, 0)']
        ]
      }
    },

线性渐变记录如下:http://www.highcharts.com/docs/chart-design-and-style/colors

注意 LinearGradient 选项中的最后一个数字(300 与您的值 0)。 http://jsfiddle.net/K4cpG/