有生命

Question

我收到以下错误海军报图触发错误：

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

在我海军报图：

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], 
[145,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

你需要围绕你的HTML ID字符串用jQuery选择：

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

这JSFiddle加载并没有错误（它拥有jQuery选择周边div的$.plotAnimate()的id）动画。

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

在上述两个JSFiddles中，都可以打开正在使用的浏览器的开发人员工具，然后查看控制台以查看错误（或缺少错误）。