日期:2014-05-16 浏览次数:20423 次
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Flot Examples</title> <link href="layout.css" rel="stylesheet" type="text/css"> <!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]--> <script language="javascript" type="text/javascript" src="../jquery.js"></script> <script language="javascript" type="text/javascript" src="../jquery.flot.js"></script> </head> <body> <h1>Flot Examples</h1> <div id="placeholder" style="width:600px;height:300px"></div> <p>Flot supports lines, points, filled areas, bars and any combinations of these, in the same plot and even on the same data series.</p> <script type="text/javascript"> /* * jQuery.flot.dashes * * options = { * series: { * dashes: { * * // show * // default: false * // Whether to show dashes for the series. * show: <boolean>, * * // lineWidth * // default: 2 * // The width of the dashed line in pixels. * lineWidth: <number>, * * // dashLength * // default: 10 * // Controls the length of the individual dashes and the amount of * // space between them. * // If this is a number, the dashes and spaces will have that length. * // If this is an array, it is read as [ dashLength, spaceLength ] * dashLength: <number> or <array[2]> * } * } * } */ (function($){ function init(plot) { plot.hooks.drawSeries.push(function(plot, ctx, series) { if (!series.dashes.show) { return; } var plotOffset = plot.getPlotOffset(); function plotDashes(datapoints, xoffset, yoffset, axisx, axisy) { var points = datapoints.points, ps = datapoints.pointsize, prevx = null, prevy = null, dashRemainder = 0, dashOn = true, dashOnLength, dashOffLength; if (series.dashes.dashLength[0]) { dashOnLength = series.dashes.dashLength[0]; if (series.dashes.dashLength[1]) { dashOffLength = series.dashes.dashLength[1]; } else { dashOffLength = dashOnLength; } } else { dashOffLength = dashOnLength = series.dashes.dashLength; } ctx.beginPath(); for (var i = ps; i < points.length; i += ps) { var x1 = points[i - ps], y1 = points[i - ps + 1], x2 = points[i], y2 = points[i + 1]; if (x1 == null || x2 == null) continue; // clip with ymin if (y1 <= y2 && y1 < axisy.min) { if (y2 < axisy.min) continue; // line segment is outside // compute new intersection point x1 = (axisy.min - y1) / (y2 - y1) * (x2 - x1) + x1; y1 = axisy.min; } else if (y2 <= y1 && y2 < axisy.min) { if (y1 < axisy.min) continue; x2 = (axisy.min - y1) / (y2 - y1) * (x2 - x1) + x1; y2 = axisy.min;