jquery走势图，求助，急
怎么用jquery画出http://data.house.sina.com.cn/xm92210/jiage/ 这样的两张走势图，跪求！！！
[解决办法]
- JScript code
<!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; } // clip with ymax if (y1 >= y2 && y1 > axisy.max) { if (y2 > axisy.max) continue; x1 = (axisy.max - y1) / (y2 - y1) * (x2 - x1) + x1; y1 = axisy.max; } else if (y2 >= y1 && y2 > axisy.max) { if (y1 > axisy.max) continue; x2 = (axisy.max - y1) / (y2 - y1) * (x2 - x1) + x1; y2 = axisy.max; } // clip with xmin if (x1 <= x2 && x1 < axisx.min) { if (x2 < axisx.min) continue; y1 = (axisx.min - x1) / (x2 - x1) * (y2 - y1) + y1; x1 = axisx.min; } else if (x2 <= x1 && x2 < axisx.min) { if (x1 < axisx.min) continue; y2 = (axisx.min - x1) / (x2 - x1) * (y2 - y1) + y1; x2 = axisx.min; } // clip with xmax if (x1 >= x2 && x1 > axisx.max) { if (x2 > axisx.max) continue; y1 = (axisx.max - x1) / (x2 - x1) * (y2 - y1) + y1; x1 = axisx.max; } else if (x2 >= x1 && x2 > axisx.max) { if (x1 > axisx.max) continue; y2 = (axisx.max - x1) / (x2 - x1) * (y2 - y1) + y1; x2 = axisx.max; } if (x1 != prevx || y1 != prevy) { ctx.moveTo(axisx.p2c(x1) + xoffset, axisy.p2c(y1) + yoffset); } var ax1 = axisx.p2c(x1) + xoffset, ay1 = axisy.p2c(y1) + yoffset, ax2 = axisx.p2c(x2) + xoffset, ay2 = axisy.p2c(y2) + yoffset, dashOffset; function lineSegmentOffset(segmentLength) { var c = Math.sqrt(Math.pow(ax2 - ax1, 2) + Math.pow(ay2 - ay1, 2)); if (c <= segmentLength) { return { deltaX: ax2 - ax1, deltaY: ay2 - ay1, distance: c, remainder: segmentLength - c } } else { var xsign = ax2 > ax1 ? 1 : -1, ysign = ay2 > ay1 ? 1 : -1; return { deltaX: xsign * Math.sqrt(Math.pow(segmentLength, 2) / (1 + Math.pow((ay2 - ay1)/(ax2 - ax1), 2))), deltaY: ysign * Math.sqrt(Math.pow(segmentLength, 2) - Math.pow(segmentLength, 2) / (1 + Math.pow((ay2 - ay1)/(ax2 - ax1), 2))), distance: segmentLength, remainder: 0 }; } } //-end lineSegmentOffset do { dashOffset = lineSegmentOffset( dashRemainder > 0 ? dashRemainder : dashOn ? dashOnLength : dashOffLength); if (dashOffset.deltaX != 0 || dashOffset.deltaY != 0) { if (dashOn) { ctx.lineTo(ax1 + dashOffset.deltaX, ay1 + dashOffset.deltaY); } else { ctx.moveTo(ax1 + dashOffset.deltaX, ay1 + dashOffset.deltaY); } } dashOn = !dashOn; dashRemainder = dashOffset.remainder; ax1 += dashOffset.deltaX; ay1 += dashOffset.deltaY; } while (dashOffset.distance > 0); prevx = x2; prevy = y2; } ctx.stroke(); } //-end plotDashes ctx.save(); ctx.translate(plotOffset.left, plotOffset.top); ctx.lineJoin = 'round'; var lw = series.dashes.lineWidth, sw = series.shadowSize; // FIXME: consider another form of shadow when filling is turned on if (lw > 0 && sw > 0) { // draw shadow as a thick and thin line with transparency ctx.lineWidth = sw; ctx.strokeStyle = "rgba(0,0,0,0.1)"; // position shadow at angle from the mid of line var angle = Math.PI/18; plotDashes(series.datapoints, Math.sin(angle) * (lw/2 + sw/2), Math.cos(angle) * (lw/2 + sw/2), series.xaxis, series.yaxis); ctx.lineWidth = sw/2; plotDashes(series.datapoints, Math.sin(angle) * (lw/2 + sw/4), Math.cos(angle) * (lw/2 + sw/4), series.xaxis, series.yaxis); } ctx.lineWidth = lw; ctx.strokeStyle = series.color; if (lw > 0) { plotDashes(series.datapoints, 0, 0, series.xaxis, series.yaxis); } ctx.restore(); }); //-end drawSeries hook } //-end init $.plot.plugins.push({ init: init, options: { series: { dashes: { show: false, lineWidth: 2, dashLength: 10 } } }, name: 'dashes', version: '0.1b' });})(jQuery)$(function () { $.plot($("#placeholder"), [ { data: [[1, 1], [2, 2], [3,3], [4, 4], [5,5]], lines: { show: true }, points: { show: true } }, { data: [[5, 5], [6, 3], [7, 2], [8, 6], [9, 9]], lines: { show: false}, points: { show: true }, dashes: { show: true } } ]);});</script> </body></html>
[解决办法]
sina用的也是别人的flash绘图的，open flash chart，不过进行了修改
flash地址
http://data.house.sina.com.cn/images/price_trend/open-flash-chart-new.swf
数据源
- JScript code
{"elements":[{"type":"line"//折线图，其他类型可以去 http://teethgrinder.co.uk/open-flash-chart-2/area-hollow.php 这里看，很多种,"colour":"#003299","font-size":10,"width":2,"dot-style":{"type":"hollow-dot","colour":"#003299","dot-size":4,"halo-size":1},"valueStyle":[1,1,0,1]//这个是控制顶点是否显示圆圈用的，1为圆圈，0为虚线点,"values":[17000,20650,18500,16350],"betweenStyle":[1,1,0,0]//控制顶点之间显示的是实现还是虚线用的，1为实线，0为虚线,"localLetter":[],"localLetterIndex":[],"localLetterOver":[],"line-style":{"style":"free","on":2,"off":5}}]//end elements,"x_axis":{"rotate":"vertical","offset":"false","stroke":0,"colour":"#c6d9fd","grid-colour":"#dddddd","min":0,"steps":1,"labels":{"labels":["2012-07","2012-08","2012-09","2012-10"]}},"y_axis":{"min":14000,"max":22000,"stroke":1,"colour":"#003299","grid_colour":"#dddddd","steps":500},"bg_colour":"#ffffff"}