highcharts日期型X轴示例2-采用arryList输出categories和确定x值

来源：互联网发布：献成分血的危害知乎编辑：程序博客网时间：2024/06/04 18:43

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();        }    }}