冻结 Highchart 动画

Question

每次 ajax 刷新时，从下面的 Highchart 生成的样条曲线都会“重新绘制”。

我的问题是有没有一种方法可以“就地”更新样条曲线，这样每次刷新时都不会重新绘制样条曲线？

我试过设置 animation: false 但是重绘一直在发生。提前致谢！

JS代码：

$(document).ready(function(){

function my_chart(response) {
    // $('#data-container').highcharts({
        chart = Highcharts.chart('data-container', {
        chart: { renderTo: 'data-container',
        defaultSeriesType: 'spline'
        //    animation: false
        },
        title: {
            text: 'Live Reddit Stream'
        },
        xAxis: {//{ type: 'datetime',
                categories: response.halfhour

        },
        yAxis: {
        minPadding: 0.2,
        maxPadding: 0.2,
        title: {text: 'Value',
                margin: 80}
        },
        series: [{
            name: 'reddit_stream',
            data: response.count
        }]
    });
}


$(function fetchdata() {
        $.ajax({
            url: '/fetch_data',
            type:'POST',
            dataType: '',
            success: function(output_string){
            //call my_chart function

            my_chart(output_string);
            
            },
            
            complete:function(output_string){
                setTimeout(fetchdata,10000);
            },

            error: function (xhr, ajaxOptions, thrownError){
                console.log(xhr.statusText);
                console.log(thrownError);
            }
        });
    });
 });

Answer 1

您需要在系列级别上禁用动画：

    Highcharts.chart('container', {
        ...,
        series: [{
            animation: false,
            ...
        }]
    });

现场演示： http://jsfiddle.net/BlackLabel/gmbLh1v3/

但每次请求后更新图表总比创建新图表好。示例：http://jsfiddle.net/BlackLabel/nxmqwp4j/

API参考：

https://api.highcharts.com/highcharts/chart.animation

https://api.highcharts.com/highcharts/series.line.animation

https://api.highcharts.com/class-reference/Highcharts.Chart#update

冻结 Highchart 动画

Freeze Highchart Animation

javascript

jquery

highcharts