highchart plotline может иметь анимацию перемещения?

Question

Есть ли какой-либо метод, позволяющий сюжетной линии перемещаться в новую позицию с анимацией?

Или мне нужно использовать другой плагин?

Я хочу построить игру binaryoption или expertoption для удовольствия.

Это моя простая демонстрация: Sample demo link

$(function() { 

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

    // Create the chart 
    $('#container').highcharts('StockChart', { 
     chart : { 
      events : { 
       load : function() { 

        // set up the updating of the chart each second 
        var series = this.series[0]; 

        var hasPlotLine = false, 
        $button = $('#button'), 
        chart = $('#container').highcharts();      

        setInterval(function() { 

        chart.yAxis[0].removePlotLine('plot-line-1'); 

         var x = (new Date()).getTime(), // current time 
          y = Math.round(Math.random() * 100); 
         series.addPoint([x, y], true, true); 

        chart.yAxis[0].addPlotLine({ 
          value: y, 
          color: 'red', 
          width: 2, 
          id: 'plot-line-1' 
         }); 
        }, 1000); 
       } 
      } 
     }, 

     rangeSelector: { 
      buttons: [{ 
       count: 1, 
       type: 'minute', 
       text: '1M' 
      }, { 
       count: 5, 
       type: 'minute', 
       text: '5M' 
      }, { 
       type: 'all', 
       text: 'All' 
      }], 
      inputEnabled: false, 
      selected: 0 
     }, 

     title : { 
      text : 'Live random data' 
     }, 

     exporting: { 
      enabled: false 
     }, 

     series : [{ 
      name : 'Random data', 
      data : (function() { 
       // generate an array of random data 
       var data = [], time = (new Date()).getTime(), i; 

       for (i = -999; i <= 0; i += 1) { 
        data.push([ 
         time + i * 1000, 
         Math.round(Math.random() * 100) 
        ]); 
       } 
       return data; 
      }()) 
     }] 

    }); 

}); 

Answer 1

Вы можете использовать animate функцию, которая позволяет перемещать SVG элемент гладко. Установите параметр translateY как разницу между предыдущей и текущей позицией y (toPixels преобразует значение в пиксели).

load: function() { 

     // set up the updating of the chart each second 
     var series = this.series[0], 
     hasPlotLine = false, 
     $button = $('#button'), 
     chart = $('#container').highcharts(), 
     yAxis = chart.yAxis[0], 
     plotLine, 
     d, 
     newY; 

     yAxis.addPlotLine({ 
     value: 50, 
     color: 'red', 
     width: 2, 
     id: 'plot-line-1' 
     }); 

     setInterval(function() { 

     var x = (new Date()).getTime(), // current time 
      y = Math.round(Math.random() * 100); 
     series.addPoint([x, y], true, true); 

     plotLine = yAxis.plotLinesAndBands[0].svgElem; 
     d = plotLine.d.split(' '); 

     newY = yAxis.toPixels(y) - d[2]; 

     plotLine.animate({ 
      translateY: newY 
     }, 300); 


     }, 1000); 
    } 

Пример:

• http://jsfiddle.net/kttfv1h3/