highcharts 数据库
0
悬赏园豆：5
[已解决问题]
解决于 2014-05-27 16:53
highcharts 怎么用SQL 数据库中的数据？
看网上给的例子，数据都是在html 中写好的，求大神指点！！！最好能给代码
最佳答案
0
没用过highcharts，以前用FusionCharts 这个flash组件，支持xml和json格式数据，就是从数据库中将数据构造xml和格式的数据，我刚才看了highcharts，用起来也很简单的，去这个看一下，很快就能上手的，http://www.hcharts.cn/(文档)
1、组成部分
http://www.hcharts.cn/docs/index.php?doc=basic-compose
2、构造数据
$(function () { $('#container').highcharts({ chart: { type: 'column' }, title: { text: 'My first Highcharts chart' }, xAxis: { categories: ['my', 'first', 'chart'] }, yAxis: { title: { text: 'something' } }, series: [{ name: 'Jane', data: [1, 0, 4] }, { name: 'John', data: [5, 7, 3] }] }); });
收获园豆：5
秋壶冰月之前回答过我问题，再次谢谢你，不过开发文档上highcharts和数据库部分还没有更新，不知道代码怎么写
@中华神: http://www.cnblogs.com/liuhaorain/archive/2012/01/24/2311352.html
上次没帮到你，不好意思哈！这个应该能帮到你，先初始化一些参数，用一个全局变量接收，这样我们Ajax加载数据，就能添加全局变量中
其他回答(1)
0
ajax返回json，在通过json把数据发到data上面就可以了
最近刚好研究过highcharts！
尊敬的大神，给点代码可以吗？万分感谢！！
@中华神:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Humiture.aspx.cs" Inherits="VrpCeShi.HistoricalData.Humiture" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>空气温湿度传感器</title> <style> * { font-size: 13px; } </style> <script src="../Scripts/jquery-1.8.1.min.js"></script> <script src="../Scripts/HeightChart/highcharts.js" type="text/javascript"></script> <script src="../Scripts/HeightChart/highcharts-more.js" type="text/javascript"></script> <script src="../Scripts/My97DatePicker/WdatePicker.js" type="text/javascript"></script> <script src="../Scripts/HeightChart/themes/grid.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("#div_table2").hide(); GetShow(); $('#yingli').click(function () { $("#div_table1").show(); $("#div_table2").hide(); }); $('#wendu').click(function () { $("#div_table1").hide(); $("#div_table2").show(); }); }); function GetShow() { var statrTime = Date.parse(document.getElementById("TimePick1").value.replace(/-/ig, '/')); var endTme = Date.parse(document.getElementById("TimePick2").value.replace(/-/ig, '/')); if (statrTime > endTme) { alert("开始时间不能大于结束时间。"); return; } GetDatasList(); GetDatasList1(); }; function GetDatasList() { var statrTime = document.getElementById("TimePick1").value; var endTme = document.getElementById("TimePick2").value; $.ajax({ url: "../Handler/HistoricalData.ashx", type: "post", dataType: "json", data: { "_h": "GetDataKQWD", "statrTime": statrTime, "endTme": endTme }, success: function (data, textStatus) { if (textStatus == "success") { if (data == "" || data == "null" || data == null) { alert("该时间点下无空气温度数据，请重新选择时间查询！"); return; } var obj = new Array(); for (var i = 0; i < data.Xdate.length; i++) { var x = [ Date.parse(data.Xdate[i].replace(/-/ig, '/')) + 8 * 60 * 60 * 1000, data.Xvalue[i] ]; obj.push(x); } $('#container1').highcharts({ chart: { zoomType: 'x', spacingRight: 30, type: 'spline' }, exporting: { enabled: false }, title: { text: '空气温湿度传感器' }, xAxis: { dateTimeLabelFormats: { day: '%b月%e日', week: '%b月%e日' }, type: 'datetime', title: { text: null } }, yAxis: { title: { text: '温度（℃）' } }, tooltip: { valueSuffix: ' ℃', shared: true, dateTimeLabelFormats: { millisecond: "%b月%e日,%H:%M:%S.%L, %A", second: "%b月%e日,%H:%M:%S, %A", minute: "%b月%e日,%H:%M, %A", hour: "%b月%e日,%H:%M, %A", day: "%b月%e日,%Y, %A", week: "%b月%e日,%Y, %A", month: "%B %Y", year: "%Y" } }, legend: { enabled: false }, plotOptions: { area: { fillColor: { linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 }, stops: [ [0, Highcharts.getOptions().colors[0]], [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')] ] }, lineWidth: 1, marker: { enabled: false }, shadow: false, states: { hover: { lineWidth: 1 } }, threshold: null } }, series: [{ type: 'area', name: '温度', data: obj }] }); } } }); }; function GetDatasList1() { var statrTime = document.getElementById("TimePick1").value; var endTme = document.getElementById("TimePick2").value; $.ajax({ url: "../Handler/HistoricalData.ashx", type: "post", dataType: "json", data: { "_h": "GetDataKQSD", "statrTime": statrTime, "endTme": endTme }, success: function (data, textStatus) { if (textStatus == "success") { if (data == "" || data == "null" || data == null) { alert("该时间点下无空气湿度数据，请重新选择时间查询！"); return; } var obj = new Array(); for (var i = 0; i < data.Xdate.length; i++) { var x = [ Date.parse(data.Xdate[i].replace(/-/ig, '/')) + 8 * 60 * 60 * 1000, data.Xvalue[i] ]; obj.push(x); } $('#container2').highcharts({ chart: { zoomType: 'x', spacingRight: 30, type: 'spline' }, exporting: { enabled: false }, title: { text: '空气湿度传感器' }, xAxis: { dateTimeLabelFormats: { day: '%b月%e日', week: '%b月%e日' }, type: 'datetime', title: { text: null } }, yAxis: { title: { text: '湿度（%RH）' } }, tooltip: { valueSuffix: ' %RH', shared: true, dateTimeLabelFormats: { millisecond: "%b月%e日,%H:%M:%S.%L, %A", second: "%b月%e日,%H:%M:%S, %A", minute: "%b月%e日,%H:%M, %A", hour: "%b月%e日,%H:%M, %A", day: "%b月%e日,%Y, %A", week: "%b月%e日,%Y, %A", month: "%B %Y", year: "%Y" } }, legend: { enabled: false }, plotOptions: { area: { fillColor: { linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 }, stops: [ [0, Highcharts.getOptions().colors[0]], [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')] ] }, lineWidth: 1, marker: { enabled: false }, shadow: false, states: { hover: { lineWidth: 1 } }, threshold: null } }, series: [{ type: 'area', name: '湿度', data: obj }] }); } } }); }; </script> </head> <body style="margin:0"> <form id="form1" runat="server"> <div> <table> <tr> <td> <div> <table> <tr> <td>选择时间：</td> <td> <div> <span>开始日期：</span> <input id="TimePick1" runat="server" class="Wdate" readonly="readonly" type="text" onclick="WdatePicker()" /> </div> <div> <span>结束日期：</span> <input id="TimePick2" runat="server" class="Wdate" readonly="readonly" type="text" onclick="WdatePicker()" /> <input type="button" id="Button1" value="查询" onclick="GetShow()" /> </div> </td> </tr> <tr> <td>选择传感器：</td> <td> <input id="yingli" type="radio" name="radio" checked="checked" /><label for="yingli">空气温度</label> <input id="wendu" type="radio" name="radio" /><label for="wendu">空气湿度</label> </td> </tr> </table> </div> </td> </tr> <tr> <td rowspan="2"> <div class="box" style="width: 98%;"> <div class="content"> <div class="layout" id="div_table1" style="width: 100%; height: 100%; border: 0px solid red;"> <table class="tableStyle"> <tr> <td colspan="2"> <div id="container1" class="container" style="width: 385px; height: 200px; margin: 0 auto"> </div> </td> </tr> </table> </div> <div class="layout" id="div_table2" style="width: 100%; height: 100%; border: 0px solid red;"> <table class="tableStyle"> <tr> <td colspan="2"> <div id="container2" class="container" style="width: 385px; height: 200px; margin: 0 auto"> </div> </td> </tr> </table> </div> </div> </div> </td> </tr> </table> </div> </form> </body> </html>
using System; using System.Collections.Generic; using System.Data; using System.Linq; using System.Web; using VrpCeShi.Class; using VrpCeShi.Commons; namespace VrpCeShi.Handler { /// <summary> /// HistoricalDataHandler 的摘要说明 /// </summary> public class HistoricalData : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; string str = ""; switch (context.Request["_h"]) { case "GetDataJYZYL"://绝缘子应力 str = "[" + GetJson(context, "INSULATOR_STRESS_1") + "," + GetJson(context, "INSULATOR_STRESS_2") + "," + GetJson(context, "INSULATOR_STRESS_3") + "]"; break; case "GetDataJYZWD"://绝缘子温度 str = "[" + GetJson(context, "INSULATOR_TEMP_1") + "," + GetJson(context, "INSULATOR_TEMP_2") + "," + GetJson(context, "INSULATOR_TEMP_3") + "]"; break; case "GetDataJYZJD"://绝缘子角度 str = "[" + GetJson(context, "WIND_ANGLE_1") + ","//绝缘子风偏角 + GetJson(context, "WIND_ANGLE_2") + "]";//绝缘子倾斜角 break; case "GetDataJYZLL"://绝缘子拉力 str = GetJsonLali(context, "PULL"); break; case "GetDataDXZDPL": //导线震动频率 str = GetJson(context, "LINE_VIB_FREQ"); break; case "GetDataDXZDFD": //导线震动幅度 str = GetJson(context, "LINE_VIB_AMPL"); break; case "GetDataDXWD": //导线温度 str = GetJson(context, "LINE_TEMP"); break; case "GetDataKQSD"://空气湿度 str = GetJson(context, "AIR_HUMIDITY"); break; case "GetDataKQWD"://空气温度 str = GetJson(context, "AIR_TEMP"); break; case "GetDataFS"://风速传感器 str = "[" + GetJson(context, "WIND_SPEED_1") + ","//顺线方向风速传感器 + GetJson(context, "WIND_SPEED_2") + "]";//垂线方向风速传感器 break; case "GetDatTDQJ"://杆塔塔顶倾斜角传感器 str = "[" + GetJson(context, "TOWER_LEAN1") + ","//顺线角度 + GetJson(context, "TOWER_LEAN2") + "]";//垂线角度 break; case "GetDatTSQJ"://杆塔塔身倾斜角传感器 str = "[" + GetJson(context, "TOWER_LEAN3") + ","//顺线角度 + GetJson(context, "TOWER_LEAN4") + "]";//垂线角度 break; } context.Response.Write(str); } private static string GetJson(HttpContext context, string FieldName) { DateTime statrTime = DateTime.Parse(context.Request["statrTime"] + " 00:00:00"); DateTime endTme = DateTime.Parse(context.Request["endTme"] + " 23:59:59"); if (endTme - statrTime > new TimeSpan(31, 0, 0, 0)) { endTme = statrTime.AddDays(31); } string sql = string.Format(@"select trunc(datetime , 'hh24') datetime, ROUND(avg({0}),2) fieldName from RTM_FIBERDATA t where DATETIME > to_date('{1}','yyyy-mm-dd hh24:mi:ss') and DATETIME < to_date('{2}','yyyy-mm-dd hh24:mi:ss') group by trunc(datetime , 'hh24') order by trunc(datetime , 'hh24')", FieldName, statrTime, endTme); DataTable dt = DbHelperOra.Query(sql).Tables[0]; string[] xvalues = new string[dt.Rows.Count]; string[] xDateValues = new string[dt.Rows.Count]; for (int i = 0; i < dt.Rows.Count; i++) { xvalues[i] = dt.Rows[i]["fieldName"].ToString(); xDateValues[i] = dt.Rows[i]["datetime"].ToString(); } TimeHeightChartsData hightChartsData = new TimeHeightChartsData(); hightChartsData.StartTime = statrTime.ToString(); hightChartsData.TimeInterval = 3600000;//一小时 hightChartsData.Xdate = xDateValues; hightChartsData.Xvalue = xvalues; #region 转换成jSon对象 var json = ""; System.Web.Script.Serialization.JavaScriptSerializer jsSer = new System.Web.Script.Serialization.JavaScriptSerializer(); jsSer.MaxJsonLength = Int32.MaxValue; json = jsSer.Serialize(hightChartsData); #endregion int star = json.LastIndexOf('['); string str = json.Substring(0, star); string str1 = json.Replace("\"", ""); str = str + str1.Substring(str1.LastIndexOf('[')); return str; } private static string GetJsonLali(HttpContext context, string FieldName) { DateTime statrTime = DateTime.Parse(context.Request["statrTime"] + " 00:00:00"); DateTime endTme = DateTime.Parse(context.Request["endTme"] + " 23:59:59"); if (endTme - statrTime > new TimeSpan(31, 0, 0, 0)) { endTme = statrTime.AddDays(31); } string sql = string.Format(@"select trunc(datetime , 'hh24') datetime, ROUND(avg({0}) / 9.8, 2) fieldName from RTM_FIBERDATA t where DATETIME > to_date('{1}','yyyy-mm-dd hh24:mi:ss') and DATETIME < to_date('{2}','yyyy-mm-dd hh24:mi:ss') group by trunc(datetime , 'hh24') order by trunc(datetime , 'hh24')", FieldName, statrTime, endTme); DataTable dt = DbHelperOra.Query(sql).Tables[0]; string[] xvalues = new string[dt.Rows.Count]; string[] xDateValues = new string[dt.Rows.Count]; for (int i = 0; i < dt.Rows.Count; i++) { xvalues[i] = dt.Rows[i]["fieldName"].ToString(); xDateValues[i] = dt.Rows[i]["datetime"].ToString(); } TimeHeightChartsData hightChartsData = new TimeHeightChartsData(); hightChartsData.StartTime = statrTime.ToString(); hightChartsData.TimeInterval = 3600000;//一小时 hightChartsData.Xdate = xDateValues; hightChartsData.Xvalue = xvalues; #region 转换成jSon对象 var json = ""; System.Web.Script.Serialization.JavaScriptSerializer jsSer = new System.Web.Script.Serialization.JavaScriptSerializer(); jsSer.MaxJsonLength = Int32.MaxValue; json = jsSer.Serialize(hightChartsData); #endregion int star = json.LastIndexOf('['); string str = json.Substring(0, star); string str1 = json.Replace("\"", ""); str = str + str1.Substring(str1.LastIndexOf('[')); return str; } public bool IsReusable { get { return false; } } } }
@刘宏玺: 非常感谢 我正好需要 当做参考 获益良多
