您的位置：首页 > Web前端 > JavaScript

flot 可以画任意多条线，不是借助 json ，看这个东西很生气，在这里用json太费劲。

2011-09-06 16:20 441 查看

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="testDefault.aspx.cs" Inherits="testDefault" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">

<title>无标题页</title>



<script language="javascript" type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>

<script language="javascript" type="text/javascript" src="Scripts/jquery.flot.js"></script>

<script language="javascript" type="text/javascript" src="Scripts/jquery.flot.crosshair.js"></script>

<style type="text/css">

#apDiv1 {

position:absolute;

width:600px;

height:300px;

z-index:1;

left: 80px;

top: 100px;

}

</style>

</head>

<body>

<form id="form1" runat="server">

<input class="fetchSeries" type="button" value="图表" />

<div id="placeholder" style="width:600px;height:300px;"></div>

</form>

</body>

<script type="text/javascript">

$(function () {

var options = {

lines: { show: true },

points: { show: true },

xaxis: { tickDecimals: 0, tickSize: 1 }

};

var data = [];

var placeholder = $("#placeholder");

var adata1;

$("input.fetchSeries").click(function () {

var button = $(this);

var dataurl = "Handler.ashx?id=2&id2="+Math.random();

function onDataReceived(series) {

data = series.split("|");

for (var i = 0; i < data.length; i++) {

data[i] = jQuery.parseJSON(data[i]);

}

$.plot(placeholder, data, options);

data.length = 0;

}

$.ajax({

url: dataurl,

method: 'GET',

//dataType: 'json',

success: onDataReceived

});

});

});

</script>

</html>

<%@ WebHandler Language="C#" Class="Handler" %>

using System;

using System.Web;

public class Handler : IHttpHandler {

public void ProcessRequest (HttpContext context) {

context.Response.ContentType = "text/plain";

// context.Response.Write("Hello World");

string action = context.Request["id"].ToString();

if (action == "2")

{

string strSTNM = "ddd1";

Random ram = new Random();

string strData = "[1999, 3.0], [2000," + Convert.ToString(ram.NextDouble() * 1000) + "], [2001, 2.0], [2002, 1.2]";

string la = "{" + "\"" + "label" + "\":" + "\"" + strSTNM + "\"";

strData = "\"data\":" + "[" + strData + "]";

string pv1 = la + "," + strData + "}";

string strSTNM1 = "ddd2";

string strData1 = "[1999, 4.0], [2000, 400.9], [2001, 8.0], [2002, 1.2]";

string la1 = "{" + "\"" + "label" + "\":" + "\"" + strSTNM1 + "\"";

strData1 = "\"data\":" + "[" + strData1 + "]";

string pv2 = la1 + "," + strData1 + "}";

string strSTNM2 = "ddd3";

string strData2 = "[1999, 6.0], [2000, 800.9], [2001, 9.0], [2002, 90.2]";

string la2 = "{" + "\"" + "label" + "\":" + "\"" + strSTNM2 + "\"";

strData2 = "\"data\":" + "[" + strData2 + "]";

string pv3 = la2 + "," + strData2 + "}";

string strSTNM3 = "ddd4";

string strData3 = "[1999, 56.0], [2000, 800.9], [2001, 90.0], [2002, 800.2]";

string la3 = "{" + "\"" + "label" + "\":" + "\"" + strSTNM3 + "\"";

strData3 = "\"data\":" + "[" + strData3 + "]";

string pv4 = la3 + "," + strData3 + "}";

pv1 = pv1 + "|" + pv2 + "|" + pv3 + "|" + pv4;

context.Response.Write(pv1);

}

}

public bool IsReusable {

get {

return false;

}

}

}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航