1

Надеюсь, что это мой последний вопрос по этой теме.

Есть график http://jsfiddle.net/ze2gabks/

  function otherRand(min, max) {
     return Math.random() * (max - min) + min;
  }

  function graphChangeMinMax(min, max) {
     var chart = $('#container').highcharts();

     chart.yAxis[0].update({
         min: min,
         max: max
     });
  }

  var date = new Date();

   var graph_plot_line_time = Date.parse(date.getFullYear()+'.'+(date.getMonth() + 1)+'.'+date.getDate()+' '+date.getHours()+':'+(date.getMinutes() + 1)+':30');

   $(function() {
    Highcharts.setOptions({
     global: {
      useUTC: false
     }
    });

    $('#container').highcharts({
     title: {
      text: ''
     },
     tooltip: {
      backgroundColor: '#000000',
      borderColor: '#000000',
      animation: true,
      shadow: false,
      style: {
       fontFamily: 'tahoma',
       fontSize: '11px',
       color: '#ffffff',
       lineHeight: '18px'
      },
      formatter: function() {
       return 'Время: '+Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x)+' <br /> Курс: '+Highcharts.numberFormat(this.y)+'';
      }
     },
     chart: {
      type: 'area',
      panning: true,
      marginTop: 0,
      marginLeft: 0,
      marginBottom: 30,
      backgroundColor: '#191919',
      plotBackgroundColor: '#242424',
      style: {
       fontFamily: 'tahoma',
       fontSize: '11px'
      },
      events: {
       load: function() {
        var series = this.series[0];

        setInterval(function() {
         var rnd = otherRand(51.5, 51.6);

         var x = (new Date()).getTime(),
             y = rnd;

         var min = $('#graph_min_value');

         if (rnd < parseFloat(min.val())) {
          min.val(rnd);
         }

         graphChangeMinMax(parseFloat(min.val()));

         series.addPoint([x, y], true, true);
        }, 1000);
       }
      }
     },
     xAxis: {
      type: 'datetime',
      lineColor: '#000000',
      tickInterval: 30000,
      tickWidth: 0,
      gridLineWidth: 1,
      gridLineColor: '#414040',
      min: date.getTime() - 130000,
      max: date.getTime() + 130000,
      labels: {
       style: {
        color: '#f8f8f8',
       }
      },
      plotLines: [{
       label: {
        text: 'Время для покупки',
        verticalAlign: 'middle',
        x: 5,
        style: {
         color: '#ffffff',
         fontSize: 12
        }
       },
       color: '#ffffff',
       width: 2,
       dashStyle: 'Dash',
       value: graph_plot_line_time
      }, {
       label: {
        text: 'Закрытие сделки',
        verticalAlign: 'middle',
        x: 5,
        style: {
         color: '#c43636',
         fontSize: 12
        }
       },
       color: '#b21717',
       width: 2,
       value: graph_plot_line_time + 30000
      }]
     },
     yAxis: {
      gridLineColor: '#414040',
      title: {text: ''},
      labels: {enabled: true},
      opposite: true
     },
     plotOptions: {
      series: {
       color: '#d06807',
       fillOpacity: 0.6,
       lineWidth: 1.6
      }
     },
     legend: {
      enabled: false
     },
     series: [{
      name: '',
      data: (function() {
       var data = [],
           data_y = [],
           i;

       for (i = -50; i <= 0; i += 1) {
        var rnd = otherRand(51.5, 52);

        data.push({
         x: date.getTime() + i * 10000,
         y: rnd
        });

        data_y.push(rnd);
       }

       var min = Math.min.apply(null, data_y);
       var max = Math.max.apply(null, max);

       setTimeout(function() {
        graphChangeMinMax(min);

        $('#graph_min_value').val(min);
       }, 10);

       return data;
      }())
     }]
    });
   });
#container {height: 400px}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"  type="text/javascript"></script>
<script src="http://isoption.com/js/chart.js" type="text/javascript"></script>

<div id="container"></div>

<input id="graph_min_value">

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

Вся проблема в том, что я добавил

  min: date.getTime() - 130000,
  max: date.getTime() + 130000

чтобы было свободное место справа и после этого он перестал сдвигаться.

Может есть решения по проще, чтобы справа было место и не пришлось мучаться со сдвигом?

8
  • Смотрю я на ваши мучения и мне вас жаль. Вам принципиально сидеть на highcharts?
    – Zelta
    18 апр 2015 в 22:44
  • @Zelta, желательно. Сначала сидел на dygraph, так там вообще API никакой. Перешёл на highcharts, тут многое сделал. И остались мелочи, но как всегда ступор..
    – ModaL
    19 апр 2015 в 7:10
  • Ну, наивное решение — обновлять все минимумы и максимумы при добавлении данных на график. То есть у вас есть переменные для минимума и максимума, которые вы увеличиваете при добавлении каждой новой точке.
    – Zelta
    19 апр 2015 в 7:24
  • Я, впрочем, всем рекомендую d3.js, и в частности плагин специально для рисования графиков на лету.
    – Zelta
    19 апр 2015 в 7:25
  • 1
    сейчас времени нету, часа через три посмотрю, что там.
    – Zelta
    19 апр 2015 в 7:29

2 ответа 2

1

Вот накропал вам быстро и грубо: http://jsfiddle.net/adzg65jh/2/.

Всякие плюшки и интерактивности можно просто скопипастить из примеров на d3js.org

7
  • ого! Исправьте, пожалуйста, ещё время c2n.me/3gng2XZ.png и чтобы интервал 30 сек был и будет отлично! Проголосую за все Ваши вопросы, чтобы репутацию повысить :)
    – ModaL
    19 апр 2015 в 17:03
  • Обновил пост. Про какой интервал идет речь?
    – Zelta
    19 апр 2015 в 17:27
  • @Zeta, 21:42:00 21:42:05 21:42:10, а хотелось бы так: 21:42:00, 21:42:30, 21:43:00 и т.д
    – ModaL
    19 апр 2015 в 17:44
  • Обновил ссылку в посте
    – Zelta
    19 апр 2015 в 18:03
  • спасибо Вам огромное. Очень благодарен Вам. Плюсиков понаставил, завтра ещё понаставлю :)
    – ModaL
    19 апр 2015 в 18:53
1

Немножко переписал ваш код, запихнул всё в класс, добавил отслеживание минимумов и максимумов. Надеюсь, сами разберетесь, как оно устроено.

var Chart = function(container) {

  var self = this;

  // Chart controllers
  // =================

  self.generate_init_data = function() {
    var date = new Date();

    var data = [],
      data_y = [],
      i;

    for (i = -50; i <= 0; i += 1) {
      var rnd = random_between(51.5, 52);

      data.push({
        x: date.getTime() + i * 1000,
        y: rnd
      });

      data_y.push(rnd);
    }

    return data;
  };

  self.on_load = function() {
    var series = this.series[0];

    graphChangeMinMaxY(self.min_y, self.max_y);
    graphChangeMinMaxX(self.min_x, self.max_x);

    setInterval(function() {
      var rnd = random_between(51.5, 52);

      var x = (new Date()).getTime(),
        y = rnd;

      self.min_x = x - 51000;
      self.max_x = x + 1000;
      self.min_y = self.min_y < y ? self.min_y : y;
      self.max_y = self.max_y > y ? self.max_y : y;

      graphChangeMinMaxY(self.min_y, self.max_y);
      graphChangeMinMaxX(self.min_x, self.max_x);

      series.addPoint([x, y], true, true);
    }, 1000);
  };


  // Utilities
  // =========

  var random_between = function(min, max) {
    return Math.random() * (max - min) + min;
  };

  var graphChangeMinMaxY = function(min, max) {
    $(container).highcharts().yAxis[0].update({
      min: min,
      max: max
    });
  };

  var graphChangeMinMaxX = function(min, max) {
    $(container).highcharts().xAxis[0].update({
      min: min,
      max: max
    });
  };

  // var graph_plot_line_time = Date.parse(date.getFullYear() + '.' + (date.getMonth() + 1) + '.' + date.getDate() + ' ' + date.getHours() + ':' + (date.getMinutes() + 1) + ':30');

  // Chart init
  // ==========
  (function() {
    var init_data = self.generate_init_data();
    var min_x = init_data[0].x,
      max_x = init_data[0].x,
      min_y = init_data[0].y,
      max_y = init_data[0].y;
    for (var i = init_data.length - 1; i >= 0; i--) {
      min_x = min_x < init_data[i].x ? min_x : init_data[i].x;
      max_x = max_x > init_data[i].x ? max_x : init_data[i].x;
      min_y = min_y < init_data[i].y ? min_y : init_data[i].y;
      max_y = max_y > init_data[i].y ? max_y : init_data[i].y;
    };
    self.min_x = min_x;
    self.max_x = max_x;
    self.min_y = min_y;
    self.max_y = max_y;



    $(container).highcharts({
      title: {
        text: ''
      },
      tooltip: {
        backgroundColor: '#000000',
        borderColor: '#000000',
        animation: true,
        shadow: false,
        style: {
          fontFamily: 'tahoma',
          fontSize: '11px',
          color: '#ffffff',
          lineHeight: '18px'
        },
        formatter: function() {
          return 'Время: ' +
            Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +
            ' <br /> Курс: ' +
            Highcharts.numberFormat(this.y) + '';
        }
      },
      chart: {
        type: 'area',
        panning: true,
        marginTop: 0,
        marginLeft: 0,
        marginBottom: 30,
        backgroundColor: '#191919',
        plotBackgroundColor: '#242424',
        style: {
          fontFamily: 'tahoma',
          fontSize: '11px'
        },
        events: {
          load: self.on_load
        }
      },
      xAxis: {
        type: 'datetime',
        lineColor: '#000000',
        tickInterval: 30000,
        tickWidth: 0,
        gridLineWidth: 1,
        gridLineColor: '#414040',
        labels: {
          style: {
            color: '#f8f8f8',
          }
        } // ,
        // plotLines: [{
        //     label: {
        //         text: 'Время для покупки',
        //         verticalAlign: 'middle',
        //         x: 5,
        //         style: {
        //             color: '#ffffff',
        //             fontSize: 12
        //         }
        //     },
        //     color: '#ffffff',
        //     width: 2,
        //     dashStyle: 'Dash',
        //     value: graph_plot_line_time
        // }, {
        //     label: {
        //         text: 'Закрытие сделки',
        //         verticalAlign: 'middle',
        //         x: 5,
        //         style: {
        //             color: '#c43636',
        //             fontSize: 12
        //         }
        //     },
        //     color: '#b21717',
        //     width: 2,
        //     value: graph_plot_line_time + 30000
        // }]
      },
      yAxis: {
        gridLineColor: '#414040',
        title: {
          text: ''
        },
        labels: {
          enabled: true
        },
        opposite: true
      },
      plotOptions: {
        series: {
          color: '#d06807',
          fillOpacity: 0.6,
          lineWidth: 1.6
        }
      },
      legend: {
        enabled: false
      },
      series: [{
        name: '',
        data: init_data
      }]
    });
  })();
}

Highcharts.setOptions({
  global: {
    useUTC: false
  }
});

var chart = new Chart('#container');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://isoption.com/js/chart.js"></script>
<div id="container"></div>

И все-таки еще раз советую вам не связываться больше с этим ужасом. Ведет себя оно странно. Кажется, где-то там утекает память. Попробуйте построить большой график... И почему мне приходится всякий раз писать $(container).highcharts()? Почему self.chart = $(container).highcharts() перестает работать через некоторое время?

9
  • это конечно всё хорошо. Но мою задачу как решить? Переходить на другие библиотеки уже влом, везде что-то да всплывает. Нужно попытаться уже с этой.
    – ModaL
    19 апр 2015 в 12:40
  • Стоп. Может я не так задачу вашу понял? Нормально же все сдвигается!
    – Zelta
    19 апр 2015 в 12:56
  • а где линии то, которые в моём примере + время стало большими интервалами? Я делаю график опциона и они необходимы. Вот скриншот нормального графика опционов c2n.me/3gmAX5m.png Слева сам график чертится, а с правой стороны эти линии.
    – ModaL
    19 апр 2015 в 13:06
  • они закомментированы. Ну почитайте внимательнее код, а?
    – Zelta
    19 апр 2015 в 13:20
  • я читал. Только от того что я их раскомментирую, они же не будут как у меня в примере jsfiddle.net/ze2gabks Так что надежда на Вас, Zelta :)
    – ModaL
    19 апр 2015 в 13:25

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.