Question

我刚写了一个简单的图表。在这张图中，线条在标记之前移动，因此对我来说似乎很奇怪。我很确定这是关于动画属性的，但是我找不到导致问题的原因。

您可以检查我的代码here

我使用以下代码设置值

function () {

    // set up the updating of the chart each second
    var series1 = this.series[0];
    var series2 = this.series[1];
    var series3 = this.series[2];

    setInterval(function () {
        var x = (new Date()).getTime(), // current time
            y = Math.random();
        series1.addPoint([x, y], true, true);

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

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

    }, 1000);

}

Answer 1

它是由addPoint和重绘所有图表3次引起的。所以我建议不要重新绘制1/2点的图表，仅限于最后一点。

http://jsfiddle.net/md7hW/4/

setInterval(function() {
                            var x = (new Date()).getTime(), // current time
                                    y = Math.random();
                            series1.addPoint([x, y], false, true);

                            var x = (new Date()).getTime(), // current time
                                    y = Math.random();
                            series2.addPoint([x, y], false, true);

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

                        }, 1000);

http://api.highcharts.com/highcharts#Series.addPoint()

Answer 2

@sebastian，谢谢你指点我正确的方向。我遇到了类似的问题，但处理动态数据。我发现在添加我的点时为redraw参数传递false，然后在图表对象上调用redraw以最适合我的情况。

var chart, REFRESH_DELAY = 1000;
function requestData(){
    $.ajax({
        url: "/reports/realtime",
        format:"json",
        cache: false,
        success: function (data) {
            for (var i = 0 ; i < data.length && i < chart.series.length; i++) {
                var series = chart.series[i], 
                    shift = series.data.length > 20,
                    point = data[i];
                series.addPoint(point, false, shift);
            }
            chart.redraw();
            setTimeout(requestData, REFRESH_DELAY);
        }
    });
}

Highcharts情节标记在样条图动画后面移动

2 个答案: