Rails flot图表 添加趋势线和拖动效果

Flot 是基于Jquery的图表显示插件。github上有flot的wrapper支持调用和现实图表。

这里是一些flot使用的例子，
Jonathan Leto added logarithmic axis support and released it to the world here with some examples here. You can read Jonathan’s post on the flot mailing list here.  I greatly appreciate Jonathan’s contributions as log support is key to my latest project.

Flot was still missing trend lines and dragability, though.  I’ve added these features and along the way I fixed a couple of issues with the logarithmic code. I’ve posted a diff of my changes and the source code to the flot issue list and mailing list.

Examples showing dragable points and trend lines in Flot graphs follow. Flot draws plots through the html <canvas> tag. This tag is supported in Firefox 1.5+, Opera 9+, and Safari. Support for Internet Explorer is handled through the excanvas.js library. Therefore drag support in IE is slower but does function. So, in IE, drag slowly and you may have to click to release the point. I am working on fixes and improvements for this. Also, I still have an issue with a previously dragged point remaining highlighted which I need to fix. This has something to do with redrawing of the plot overlay (now fixed, nothing to do with the overlay).

Note that if selection support is enabled (to select an area on the graph, e.g. for zooming), dragging will be automatically disabled. The UI interaction of both at the same time is not desirable.

An example of a plot on a log y axis (log axes thanks to Jonathan!). The points in Series 2 are dragable. When dragged, the table below will update with the new data values.





Dragable support is off by default and must be turned on in the options object passed into the plot:

var options = {
    lines: { show: true  },
    points: {show: true, fill: true, fillcolor:'#999999' },
    selection: {mode: null},
    dragable: true,
    yaxis: { autoscaleMargin: 0.2, base: 10, tickDecimals: 1, tickSize: 1 },
    grid: { hoverable: true, clickable: true , color: "#999999"},
    legend: {show: true,
        position: 'nw',
        backgroundColor: '#ffffff',
        margin: 10,
        labelBoxBorderColor: '#999999'}
    };

Dragable support for individual lines can then be overridden by the line options:

var chart = $.plot($("#plotdiv"),
    [
    {label: "Series 1",
        dragable: false,
        clickable: false,
        hoverable: false, data: data1},
    { label: "Series 2", data: data2}
    ],
    options
);

   

When dragging, the plot fires a “plotSeriesChange” event on the placeholder div with the series index, data index, updated x and updated y values as parameters. You can bind the plot target div to this event to do something while the user is dragging the point. Note that on log graphs, the data values are no longer returned as logarithmic values, they rescaled to normal (I also updated the plotclick/hover events to rescale the values).

$("#plotdiv").bind("plotSeriesChange",
    function (event, seriesIndex, dataIndex, newx, newy) {
      tabledata[dataIndex] = [newx, newy];
      $.each(tabledata, initTable);
});

A plot with a trend line and dragable bar graph. Trend lines can be added to line or bar graphs. The trend line will dynamically recalculate for a dragable graph.





Trend lines are off by default and must be turned on in the options object passed into the plot:

var options2 = {
    trendLines: { show: true, label: "trendline"  },
    lines: { show: false  },
    points: {show: false },
    dragable: true,
    bars: {show: true, barWidth: 0.5, align: "center" },
    selection: {mode: null},
    yaxis: { autoscaleMargin: 0.2, tickDecimals: 1, tickSize: 1 },
    grid: { hoverable: true, clickable: true , color: "#999999"},
    legend: {show: true,
        position: 'nw',
        backgroundColor: '#ffffff',
        margin: 15,
        labelBoxBorderColor: '#999999'}
};

Trend line options are similar to flot line options except clickability, hoverability and dragability are forced off. You can override showing a trend line for an individual line or alter other trend line options in the individual line options:

var chart2 = $.plot($("#plotdiv2"),
    [{label: "Data", trendLines:{lineWidth: 4}, data: data3}],
    options2
);

Many Thanks to Ole for an exceptional piece of open source software and for Jonathan’s extremely useful additions!

http://www.hacknack.com/2009/02/adding-trendlines-and-dragable-to-flot/

评论

1 楼 cheyongzi 2012-10-19  

想问一下 你这个点拖动的方法在Flot里面有吗？还是你使用的是jqPlot？不知道你还有没有这个拖动例子的代码，希望你能发给我一下 [e-mail] 或者我们交流一下。