highchart plotline可以有移动动画吗?

时间:2016-08-19 17:10:17

标签: javascript highcharts

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

或者我是否必须使用其他插件?

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

这是我的简单演示: 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;
            }())
        }]

    });

});

1 个答案:

答案 0 :(得分:1)

您可以使用user.teams[0].teamName功能,它可以让您顺利移动SVG元素。将translateY参数设置为y的前一个位置和当前位置之间的差值(toPixels将值转换为像素)。

animate

示例: