highcharts日期型X轴示例_highcharts x轴显示日期_Hello World,的博客-程序员秘密

技术标签： date Javascript资料 string function ASP.NET html join xhtml

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

本文链接：https://blog.csdn.net/apollokk/article/details/8025853

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

java加密体系-数字签名（SHA256withRSA）_sha256withrsa java_攻城狮Luke（刘健彬）的博客-程序员秘密

package com.mpush.rsa;import java.io.ByteArrayInputStream;import java.io.File;import java.io.FileInputStream;import java.io.FileNotFoundException;import java.io.FileOutputStream;import java.io...

quosego [Themida/Winlicense unpacking questions]_perfectplug的博客-程序员秘密

http://forum.tuts4you.com/topic/17856-themidawinlicense-unpacking-questions/

Glide之SourceGenerator数据请求和磁盘缓存_Zhongyi_Li的博客-程序员秘密

先看一下对SourceGenerator的描述：Generates {@link com.bumptech.glide.load.data.DataFetcher DataFetchers} from original source datausing registered {@link com.bumptech.glide.load.model.ModelLoader ModelLoade...

配置管理小报110215-2:当rsync遇到非默认端口的ssh方法_weixin_34272308的博客-程序员秘密

为什么80%的码农都做不了架构师？>>> ...

读取图片文件将其转为二进制,再生成新的图片_zhuseahui的博客-程序员秘密

读取图片文件将其转为二进制,再生成新的图片package com.image.test;/** * @title 读取图片文件将其转为二进制,再生成新的图片 * @author 让痛苦痛苦 * @缺点: 就是生成的新的图片颜色有点失真,....希望大家帮忙一起提提意见.本人邮件:[email protected] * */import java.awt.image.*;import j

vue+cesium初探（一）之vue环境配置_湫沐椿风的博客-程序员秘密

1、基础环境 2、创建项目选择第三项自己配置按上下移动，空格键选择，回车键确定后面就按自己喜好去配，不懂可以摆渡3、安装cesium依赖4、配置vue.config.js在项目目录下新建vue.config.js，配置如下const CopyWebpackPlugin = require('copy-webpack-plugin')const webpack = require('webpack')const path = requi...