Как применить градиент, используя высокие графики в динамическом графике.

0
<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. Я могу применить градиент фона, но градиент отдельного графа не является применяется в веб-браузерах. Спасибо.

  • 1
    jsfiddle.net/BjL6r Это выглядит красиво. Я думаю, что у вас может возникнуть проблема с библиотекой jQuery. Возможно, порядок загрузки скриптов неверный ...
  • 0
    Не могли бы Вы уточнить. Градиент работает в фоновом режиме графика, но не внутри самого графика. так что, может быть, это не версия JQuery. любые другие предложения приветствуются.
Показать ещё 1 комментарий
Теги:
browser
gradient
highcharts

1 ответ

3

Похоже, что вы не устанавливаете линейный градиент для фона диаграммы правильно. Попробуйте что-нибудь вроде:

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

Обратите внимание на последнее число (300 против вашего значения 0) в опции linearGradient. http://jsfiddle.net/K4cpG/

  • 0
    свойства fillcolor (в частности, backgroundcolor) как linearGradient, остановки не приведены в справочнике по старшим диаграммам API. не могли бы вы объяснить их свойства. Мне нужно срочно применить правильный градиент. Спасибо
  • 0
    Немного больше информации здесь: highcharts.com/docs/chart-design-and-style/colors
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню