2

我想动态更新 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);
4

2 回答 2

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();                 
                }
于 2012-09-09T10:17:32.040 回答
0

我有一个类似的问题，但还需要能够动态添加额外的覆盖（不仅仅是修改现有的）。

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

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

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

于 2016-11-21T16:43:35.620 回答