HTML
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="LineTest1.aspx.cs" Inherits="Highcharts_LineTest1" %>
<!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 src="../JS/jquery-1.7.min.js" type="text/javascript"></script>
<script src="../JS/highcharts.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto">
</div>
</form>
</body>
</html>
JS:
<script type="text/javascript"> $(function () { var chart; $(document).ready(function () { chart = new Highcharts.Chart({ chart: { renderTo: 'container', type: 'line', marginRight: 130, marginBottom: 25 }, title: { text: '员工工资曲线图', style:{ fontSize: '20px' }, x: -20 //center }, subtitle: { text: 'Source: WorldClimate.com', x: -20 }, xAxis: { type: 'datetime', labels: { tickPixelInterval: 150 //间隔像素 /*step: 5/*, formatter: function () { return Highcharts.dateFormat('%Y-%m-%d', this.date); }*/ }, categories: [<%=categories %>] }, yAxis: { title: { text: '工资(¥)' }, plotLines: [{ value: 0, width: 1, color: '#808080' }] }, tooltip: { formatter: function () { return '<b>' + this.series.name + '</b><br/>' + this.x + ': ¥' + this.y.toFixed(2); //Highcharts.dateFormat('%Y-%m-%d', this.date) + ': ¥' + this.y.toFixed(2); } }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'top', x: -10, y: 10, borderWidth: 0 }, plotOptions: { series: { cursor: 'pointer', dataLabels: { enabled: true, formatter: function() { return '¥' + this.y.toFixed(2); } }, point: { events: { click: function() { alert ('Category: '+ Highcharts.dateFormat('%Y-%m-%d', this.date) +', value: '+ this.y + ",id:" + this.id); } } } } }, series: [<%=dataPoints%> ] }); }); }); </script>
C#:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Collections;
public partial class Highcharts_LineTest1 : System.Web.UI.Page
{
public string dataPoints = "";
public string categories = "";
/// <summary>
/// 本示例采用arryList输出
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void Page_Load(object sender, EventArgs e)
{
using (SqlConnection conn = new SqlConnection("Data Source=192.168.1.24;Initial Catalog=dgmlOA;uid=sa;pwd=ufo2010?@dgml"))
{
SqlCommand cmd = conn.CreateCommand();
cmd.CommandText = "select max(money) as money,id, name,date from("
+ " SELECT sum(e.amount) as money,dept.id, dept.department as name,d.date,e.empCode"
+ " FROM ProductpSchedule_Tasks t"
+ " INNER JOIN ProductpSchedule_Main m ON t.pid = m.id"
+ " INNER JOIN ProductpSchedule_ReportData d ON t.id = d.pid"
+ " INNER JOIN workcenter w ON w.code = d.workcenterCode"
+ " INNER JOIN department dept ON w.pid = dept.id"
+ " Inner join dbo.ProductpSchedule_ReportData_Emps e on e.pid=d.id"
+ " WHERE d.date BETWEEN @date1 AND @date2 ";
cmd.CommandText += " group by dept.id, dept.department,d.date,e.empCode) t"
+ " group by id,name,date having(max(money))>0 order by id,date";
cmd.Parameters.Add("date1", "2012-7-1");
cmd.Parameters.Add("date2", "2012-8-1");
conn.Open();
string ser = "";
string data = "";
ArrayList categoriesList = new ArrayList();
TimeSpan ticks = new TimeSpan(new DateTime(1970, 1, 1).Ticks);
int index = 0;
SqlDataAdapter da = new SqlDataAdapter(cmd);
System.Data.DataTable dt=new System.Data.DataTable();
da.Fill(dt);
System.Data.DataView dv = dt.DefaultView;
dv.Sort = "date asc";
for (int i = 0; i < dv.Count; i++)
{
if (categoriesList.IndexOf(Convert.ToDateTime(dv[i]["date"]).ToString("yyyy-MM-dd")) == -1)
{
categoriesList.Add(Convert.ToDateTime(dv[i]["date"]).ToString("yyyy-MM-dd"));
}
}
da.Dispose();
dt.Dispose();
dv.Dispose();
SqlDataReader dr = cmd.ExecuteReader();
while (dr.Read())
{
index = categoriesList.IndexOf(Convert.ToDateTime(dr["date"]).ToString("yyyy-MM-dd"));
if (ser != dr["name"].ToString())
{
if (ser != "")
{
if (dataPoints != "")
{
dataPoints += ",";
}
dataPoints += "{name:'" + ser + "',data:[" + data + "]}";
}
ser = dr["name"].ToString();
data = "{x:"+ index.ToString() + ",date:" + new TimeSpan(DateTime.Parse(dr["date"].ToString()).Ticks).Subtract(ticks).Duration().TotalMilliseconds.ToString() + ",y:" + dr["money"].ToString() + ",id:" + dr["id"].ToString() + "}";
}
else
{
if (data != "")
{
data += ",";
}
data += "{x:" + index.ToString() + ",date:" + new TimeSpan(DateTime.Parse(dr["date"].ToString()).Ticks).Subtract(ticks).Duration().TotalMilliseconds.ToString() + ",y:" + dr["money"].ToString() + ",id:" + dr["id"].ToString() + "}";
}
}
if (dataPoints != "")
{
dataPoints += ",";
}
categories ="'" + string.Join("','", (string[])categoriesList.ToArray(typeof(string))) + "'";
dataPoints += "{name:'" + ser + "',data:[" + data + "]}";
//Response.Write(dataPoints);
dr.Close();
cmd.Dispose();
}
}
}