Question

我正在尝试使用以下代码创建的Flot图表。

var options = {
                yaxis: { min: 0 },
                xaxis: { mode: "time" },
                series:{
                         lines: { show: true },
                         points: { show: true }
                       },
                grid: {
                        hoverable: true, 
                        clickable: false, 
                        mouseActiveRadius: 30,
                        backgroundColor: { colors: ["#D1D1D1", "#7A7A7A"] }
                       },
                selection:{mode: "x"}
              };
var pdata = [];
for (var key in datasets) {
        pdata = [];
         pdata.push(datasets[key]);
        $.plot( $('<div style="width:1200px;height:600px;"></div>').appendTo('#placeholder'),pdata,options);
        $('<h5 align="center">'+datasets[key]['label']+'</h5>').appendTo('#placeholder');
        $('<br>').appendTo('#placeholder');
        $("#placeholder").UseTooltip();
    };

这里我在循环中创建多个图表。如何添加zoomin功能。

谢谢。

Answer 1

Mark回答的后续行动：唯一ID并不是Flot限制;这是HTML规范的要求。浏览器通常会让你违反这条规则，但它仍然不是一个好主意。 Mark的答案很好，但是这里不需要对每个事件进行数组搜索：

$.each(datasets, function(key, dataset) {
    var element = $('<div style="width:1200px;height:600px;"></div>')
        .appendTo('#placeholder');
    var plot = $.plot(element, [dataset], options);
    var plotOptions = plot.getOptions();
    element.bind('plotselected', function(event, ranges) {
        plotOptions.xaxes[0].min = ranges.xaxis.from;
        plotOptions.xaxes[0].max = ranges.xaxis.to;
        plot.setupGrid();
        plot.draw();
    });
};

Answer 2

flot通常希望它的占位符div具有唯一的id。然后，您可以使用此唯一id为该图分配特定的plotselected事件。但是，在编写代码的过程中，您将在创建绘图时将实际占位符div附加到父div。我喜欢你的方法，所以我们需要解决flot的限制。

因此，在plot调用中，为您的真实占位符div提供一个类名。这将为我们提供绑定plotselected事件的东西。您还需要保存对已创建的所有绘图对象的引用。我只是使用全局数组。

myPlots.push(
   $.plot( $('<div class="myPlot" style="width:300px;height:100px;"></div>').appendTo('#placeholder'),pdata,options)
);

myPlots是全局数组，而我的类是myPlot。

在此之后，您可以在jquery选择器plotselected上设置.myPlots处理程序。接下来对于棘手的部分，您需要在处理程序中找到您的绘图对象引用。我发现，最简单的方法是循环你的myPlots数组并将它们的div与事件发生的div进行比较：

$(".myPlot").bind("plotselected", function (event, ranges) {
    for (var i = 0; i < myPlots.length; i++)
    {
        var aPlot = myPlots[i];
        if (aPlot.getPlaceholder()[0] == event.currentTarget) //this is the correct plot
        {
            var opts = myPlots[i].getOptions();
            opts.xaxes[0].min = ranges.xaxis.from;
            opts.xaxes[0].max = ranges.xaxis.to; 
            myPlots[i].setupGrid();
            myPlots[i].draw();
        }        
    }    
});

你会在上面看到我重绘的情节与flot examples略有不同。我更喜欢这种方法，因为您不必记住数据，调整最小/最大选项并重绘。

这是fiddle这一切。

如何为创建的多个Flot图表放大x轴

2 个答案: