日期:2014-05-16  浏览次数:20384 次

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;