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();                 
                }

Answer 2

我遇到了类似的问题，但还需要能够动态添加其他叠加层（而不仅仅是修改现有叠加层）。

我使用以下方法使用新的/修改的叠加对象数组重绘图表：

var chart = $.jqplot(...);
var overlayObjects = getOtherOverlayObjects();
chart.plugins.canvasOverlay = new $.jqplot.CanvasOverlay({
    show: true,
    objects: overlayObjects
});
chart.replot();

传递给$ .jqplot.CanvasOverlay（）函数的参数与最初传递给$ .jqplot（）的canvasOverlay-options具有相同的结构。

动态更新jQuery jqPlot的canvasOverlay属性

2 个答案: