javascript - 动态更新 jQuery jqPlot 的 canvasOverlay 属性

Question

我想动态更新 jQuery jqPlot 的 canvasOverlay 属性。这将在我的 jqPlot 中提供时间线的效果。此效果应类似于此 jFiddle 中显示的效果.但是，我不想绘制点，而是想每秒更新一次 canvasOverlay 属性:

                canvasOverlay: {
                    show: true,
                    objects: [
                        { rectangle: { xmax: new Date(), xminOffset: "0px", xmaxOffset: "0px", yminOffset: "0px", ymaxOffset: "0px",
                                            color: "rgba(0, 0, 0, 0.1)", showTooltip: true } },
                    ]
                } 

我该怎么做？我应该使用哪些功能？

更新:

我的想法是做这样的事情:

                    canvasOverlay: {
                        name: 'current',
                        show: true,
                        objects: [
                            { rectangle: { xmax: new Date(), xminOffset: "0px", xmaxOffset: "0px", yminOffset: "0px", ymaxOffset: "0px",
                                                color: "rgba(0, 0, 0, 0.1)", showTooltip: true } },
                        ]
                    } 

/...

var co = plot.plugins.canvasOverlay;
var current = co.get('current');

current.options.objects.rectangle.xmax = new Date();
co.draw(plot);

Answer 1

我找到了答案。希望它对某人有用:

canvasOverlay: {
                        show: true,
                        objects: [
                            { 
                                rectangle: { 
                                    name: 'current',
                                    xmax: new Date(), 
                                    xminOffset: "0px", 
                                    xmaxOffset: "0px", 
                                    yminOffset: "0px", 
                                    ymaxOffset: "0px",
                                    color: "rgba(0, 0, 0, 0.1)", 
                                    showTooltip: true 
                                } 
                            },
                 ]
             } 

                $('#buttonNext').bind("click", function() {
                    counter++;
                    UpdateTimeline(plot1);
                });

                $(document).ready(function() {
                    $('#buttonNext').click();
                });

                window.setInterval(function(){
                    $('#buttonNext').click();
                }, 1000);

function UpdateTimeline(plot1) {
                    var co = plot1.plugins.canvasOverlay;
                    co.get("current").options.xmax = new Date();
                    co.draw(plot1);
                    plot1.replot();                 
                }