highcharts日期型X轴示例
highcharts处理日期型X轴比较麻烦，用以下方法可以实现：
HTML:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Highcharts_Default" %>
<!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> <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"> </div> </body> </html>
前端脚本：
<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: {
step: 4,
formatter: function () {
return Highcharts.dateFormat('%Y-%m-%d', this.value);
}
}
},
yAxis: {
title: {
text: '工资(￥)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('%Y-%m-%d', this.x) + ': ￥' + this.y.toFixed(2);
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
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.x) +', value: '+ this.y + ",id:" + this.id);
}
}
}
}
},
series: [<%=dataPoints%> ]
});
});
});
</script>后台代码示例：
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;
public partial class Highcharts_Default : System.Web.UI.Page
{
public string dataPoints="";
protected void Page_Load(object sender, EventArgs e)
{
using (SqlConnection conn = new SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["dgmlOAConnectionString"].ConnectionString))
{
SqlCommand cmd = conn.CreateCommand();
cmd.CommandText = "select max(money) as money,id, name,date from("
+ " SELECT sum(e.amount) as money,w.id, w.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 w.id, w.name,d.date,e.empCode) t"
+ " group by id,name,date having(max(money))>0 order by id,date";
cmd.Parameters.Add("date1", "2012-4-1");
cmd.Parameters.Add("date2", "2012-9-1");
conn.Open();
SqlDataReader dr = cmd.ExecuteReader();
string ser = "";
string data = "";
TimeSpan ticks =new TimeSpan(new DateTime(1970, 1, 1).Ticks);
while (dr.Read())
{
if (ser != dr["name"].ToString())
{
if (ser != "")
{
if (dataPoints != "")
{
dataPoints += ",";
}
dataPoints += "{name:'" + ser + "',data:[" + data + "]}";
}
ser = dr["name"].ToString();
data = "{x:" + 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:" + new TimeSpan(DateTime.Parse(dr["date"].ToString()).Ticks).Subtract(ticks).Duration().TotalMilliseconds.ToString() + ",y:" + dr["money"].ToString() + ",id:" + dr["id"].ToString() + "}";
}
}
if (dataPoints != "")
{
dataPoints += ",";
}
dataPoints += "{name:'" + ser + "',data:[" + data + "]}";
//Response.Write(dataPoints);
dr.Close();
cmd.Dispose();
}
}
}
