Wie bewerben Verlauf mit highcharts in einem dynamischen Diagramm.

<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]
            ]
          }
        ]
      });
  });

Ich bin immer die erforderliche Gefälle in jsfiddle(durch den oben genannten code), aber die gleiche Sache nicht beliebigen web-browser angezeigt.Ich bin mit highcharts v 3.0.7.Ich kann die hintergrund-Verlauf, sondern die einzelnen Diagramm-Farbverlauf wird nicht angewendet in den web-Browsern.
Danke.

  • jsfiddle.net/BjL6r Es sieht schön aus. Ich denke, das Problem, das Sie haben können, ist die jQuery-Bibliothek. Vielleicht ist die Ladereihenfolge der Skripte nicht korrekt...
  • könnten Sie genauer sein. Farbverlauf im hintergrund des Diagramms, aber nicht in der Grafik selbst. also vielleicht , das ist aber nicht die jQuery-version. andere Vorschläge sind willkommen.
  • könnten Sie etwas konkreter, was ist falsch mit MarsOne Beispiel? Für mich zeigt es richtig Farbverlauf für Flächendiagramme.
InformationsquelleAutor deepjyoti22 | 2013-11-12
Schreibe einen Kommentar