zoukankan      html  css  js  c++  java
  • highcharts日期型X轴示例2采用arryList输出categories和确定x值

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




  • 相关阅读:
    A1066 Root of AVL Tree (25 分)
    A1099 Build A Binary Search Tree (30 分)
    A1043 Is It a Binary Search Tree (25 分) ——PA, 24/25, 先记录思路
    A1079; A1090; A1004:一般树遍历
    A1053 Path of Equal Weight (30 分)
    A1086 Tree Traversals Again (25 分)
    A1020 Tree Traversals (25 分)
    A1091 Acute Stroke (30 分)
    A1103 Integer Factorization (30 分)
    A1032 Sharing (25 分)
  • 原文地址:https://www.cnblogs.com/apollokk/p/6713928.html
Copyright © 2011-2022 走看看