highchart情节线可以有移动动画吗？ [英] highchart plotline can have move animation?

问题描述

或者我必须使用另一个插件吗？

$ b $是否有任何方法允许情节线移动到动画的新位置？ b

我希望像二元期权或专业选项游戏一样构建乐趣。

这是我的简单演示：
示例演示链接

  $（函数（）{
 
 Highcharts.setOptions（{
 global：{
 useUTC：false 
} 
}）; 
 
 //创建图表
 $（'＃container'）。highcharts（'StockChart'，{
 chart：{
 events：{
 load：function（）{
 
 //设置每秒更新图表
 var series = this.series [0]; 
 
 var hasPlotLine = false，
 $ button = $（'＃button'），
 chart = $（'＃container'）。hig hcharts（）; 
 
 setInterval（function（）{
 
 chart.yAxis [0] .removePlotLine（'plot-line-1'）; 
 
 var x =（new Date（））。getTime（），//当前时间
 y = Math.round（Math.random（）* 100）; 
 series.addPoint（[x，y]，true，true）; 
 $ b chart.yAxis [0] .addPlotLine（{
 value：y，
 color：'red'，
 width：2，
 id： 'plot-line-1'
}）; 
}，1000）; 
} 
} 
}，
 
 rangeSelector：{
按钮：[{
 count：1，
 type：'分钟'，
文本：'1M'
}，{
计数：5，
类型：'分钟'，
文本：'5M'
 }，{
 type：'all'，
 text：'All'
}]，
 inputEnabled：false，
 selected：0 
}， 
 
标题：{
文本：'实时随机数据'
}，
 
导出：{
启用：false 
 }，
 
 series：[{
 name：'Random data'，
 data：（function（）{
 //产生一个随机数据数组
 var data = []，time =（new Date（））。getTime（），i; 
 
 for（i = -999; i <= 0; i + = 1）{
 data.push（[
 time + i * 1000，
 Math.round（Math.random（ ）* 100）
]）; 
} 
返回数据; 
}（））
}] 
 
}）; 
 
}）; 
  

解决方案

您可以使用 animate 函数，它允许您平滑地移动SVG元素。设置一个translateY参数作为y的前一个和当前位置之间的差异（toPixels将值转换为像素）。

  load：function（ ）{
 
 //设置每秒更新图表
 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'
}）; 
 $ b $ setInterval（function（）{
 
 var x =（new Date（））。getTime（），//当前时间
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）; 
 
 $ / code> 

示例：



• http://jsfiddle.net/kttfv1h3/

Is there any method that allows plotline to move to a new position with animation?

Or do I have to use another plugin?

I want to build like a binaryoption or expertoption game for fun.

It's my simple demo: 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;
            }())
        }]

    });

});

解决方案

You can use animate function, which allows you to move SVG element smoothly. Set a translateY parameter as a difference between previous and current position of y (toPixels converts value to pixels).

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

Example:

• http://jsfiddle.net/kttfv1h3/

这篇关于highchart情节线可以有移动动画吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！