javascript - 动画图表触发错误

Question

我收到以下错误:

Uncaught TypeError: chart.trigger is not a functionplotData @ jquery.flot.animator.js:124

在我的 float 图表上:

var options = {
    "xaxis": {
        "mode": "time",
        "timeformat": "%d/%m",
        //"tickSize": [1, "day"]
    },
    "yaxes": [{
            "position": "left",
            //"tickSize": 1,
            "min": min,
            "max": 100
        }, {
            "position": "right",
            "min": 0,
            "max": max
        }
    ],
    "series": {
        "lines": {
            "show": true
        },
        curvedLines: {
            apply: true,
        } 
    },
    "colors": ["#00ff00"],
    "legend": {
        "show": false
    },
    "grid": {
        hoverable: true,
        clickable: true
    },
    animator: { start: 100, steps: 99, duration: 2000, direction: "left" }
};

我试过:

plot = $.plotAnimator("#network-graph",  [{ data : [arr], 
    animator: { start: 100, steps: 99, duration: 1000, direction: "left" } }], options);

和

plot = $.plotAnimator("#network-graph",  [{ data : arr, 
    animator: { start: 100, steps: 99, duration: 1000, direction: "left" } }], options);

我已经尝试过了

plot = $.plotAnimator($("#network-graph"),  [{ data : arr, animator: { start: 100, steps: 99, duration: 1000, direction: "left" } }], options);

但它崩溃了。

当我尝试以下操作时，它不会崩溃或弹出任何错误，但是数据点不会加载。

plot = $.plotAnimator($("#network-graph"),  [{ data : [arr], animator: { start: 100, steps: 99, duration: 1000, direction: "left" } }], options);

这是数据

[1449619200000,99.38],
[1449622800000,99.23],
[1449626400000,99.39],
[1449630000000,99.4],
[1449633600000,99.39],
[1449637200000,99.4],
[1449640800000,99.41],
[1449644400000,99.4],
[1449648000000,99.31],
[1449651600000,99.12],
[1449655200000,99.06],
[1449658800000,98.93],
[1449662400000,98.94],
[1449666000000,99.05],
[1449669600000,99.11],
[1449673200000,99.16],
[1449676800000,99.3],
[1449680400000,99.4],
[1449684000000,99.43],
[1449687600000,99.43],
[1449691200000,99.43],
[1449694800000,99.43],
[1449698400000,99.43],
[1449702000000,99.44],
[1449705600000,99.46],
[1449709200000,99.37],
[1449712800000,99.41],
[1449716400000,99.38],
[1449720000000,99.36],
[1449723600000,99.34],
[1449727200000,99.37],
[1449730800000,99.36],
[1449734400000,99.3],
[1449738000000,99.16],
[1449741600000,99.03],
[1449745200000,98.93],
[1449748800000,98.97],
[1449752400000,99.01],
[1449756000000,99.03],
[1449759600000,99.11],
[1449763200000,99.2],
[1449766800000,99.26],
[1449770400000,99.31],
[1449774000000,99.34],
[1449777600000,99.34],
[1449781200000,99.33],
[1449784800000,99.32],
[1449788400000,99.37],
[1449792000000,99.33],
[1449795600000,99.32],
[1449799200000,99.31],
[1449802800000,99.34],
[1449806400000,99.34],
[1449810000000,99.33],
[1449813600000,99.33],
[1449817200000,99.33],
[1449820800000,99.21],
[1449824400000,99.05],
[1449828000000,98.82],
[1449831600000,98.85],
[1449835200000,98.94],
[1449838800000,99.04],
[1449842400000,99.11],
[1449846000000,99.17],
[1449849600000,99.25],
[1449853200000,99.25],
[1449856800000,99.32],
[1449860400000,99.4],
[1449864000000,99.37],
[1449867600000,99.09],
[1449871200000,99.06],
[1449874800000,99.19],
[1449878400000,99.42],
[1449882000000,99.43],
[1449885600000,99.43],
[1449889200000,99.41],
[1449892800000,99.41],
[1449896400000,99.4],
[1449900000000,99.4],
[1449903600000,99.43],
[1449907200000,99.41],
[1449910800000,99.31],
[1449914400000,99.26],
[1449918000000,99.2],
[1449921600000,99.21],
[1449925200000,99.27],
[1449928800000,99.35],
[1449932400000,99.39],
[1449936000000,99.43],
[1449939600000,99.45],
[1449943200000,99.47],
[1449946800000,99.48],
[1449950400000,99.47],
[1449954000000,99.46],
[1449957600000,99.51],
[1449961200000,99.51],
[1449964800000,99.52],
[1449968400000,99.52],
[1449972000000,99.5],
[1449975600000,99.47],
[1449979200000,99.48],
[1449982800000,99.48],
[1449986400000,99.5],
[1449990000000,99.5],
[1449993600000,99.44],
[1449997200000,99.36],
[1450000800000,99.36],
[1450004400000,99.37],
[1450008000000,99.37],
[1450011600000,99.39],
[1450015200000,99.43],
[1450018800000,99.48],
[1450022400000,99.52],
[1450026000000,99.51],
[1450029600000,99.52],
[1450033200000,99.52],
[1450036800000,99.52],
[1450040400000,99.51],
[1450044000000,99.5],
[1450047600000,99.49],
[1450051200000,99.5],
[1450054800000,99.5],
[1450058400000,99.5],
[1450062000000,99.49],
[1450065600000,99.49],
[1450069200000,99.5],
[1450072800000,99.48],
[1450076400000,99.5],
[1450080000000,99.5],
[1450083600000,99.38],
[1450087200000,99.2],
[1450090800000,99.11],
[1450094400000,99.08],
[1450098000000,99.1],
[1450101600000,99.12],
[1450105200000,99.23],
[1450108800000,99.37],
[1450112400000,99.41],
[1450116000000,99.42],
[1450119600000,99.43],
[1450123200000,99.42],
[1450126800000,99.43],
[1450130400000,99.44],
[1450134000000,99.43],
[1450137600000,99.4],

我正在使用以下代码绘制图表，效果很好。

if(DEBUG){      
        g_start = new Date().getTime();
        console.log("start graph render: " + g_start );
    }
    var data_ajax = [{
            "color" : "#A8B400",
            "label" : "R1 Graph",
            "lines" : {
                "show" : true,
                "lineWidth" : 1
            },
            "points" : {
                "show" : false
            },
            "yaxes" : 1,
            "data" : arr,
            animator: { start: 100, steps: 99, duration: 1000, direction: "left" }
        }
    ];
    $('#network-graph').empty();
    //plot = $.plotAnimator($("#network-graph"),  data_ajax, options);
    plot = $.plot("#network-graph",  data_ajax, options);

    bind();
    if(DEBUG){      
        g_end = new Date().getTime();
        console.log("finish graph render: " + g_end );
        console.log("process graph render duration : " +  ((g_end - g_start)/1000) + "s" );
    }

Answer 1

您需要用 jquery 选择器包围您的 HTML id 字符串:

plot = $.plotAnimator($("#network-graph"), [{ data : arr, animator: { start: 100, steps: 99, duration: 1000, direction: "left" } }], options);

这JSFiddle加载和动画没有错误(它有 jQuery 选择器包围 $.plotAnimate() 中 div 的 id)。

这JSFiddle重现您在动画完成时看到的错误($.plotAnimate() 中没有选择器)。

在上述两个 JSFiddles 中，您可以打开您正在使用的浏览器的开发人员工具并查看控制台以查看错误(或缺少错误)。