首页 新闻 赞助 找找看

highcharts 数据库

0
悬赏园豆:5 [已解决问题] 解决于 2014-05-27 16:53

highcharts 怎么用SQL 数据库中的数据?

看网上给的例子,数据都是在html 中写好的,求大神指点!!!最好能给代码

中华神的主页 中华神 | 初学一级 | 园豆:48
提问于:2014-05-25 09:58
< >
分享
最佳答案
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
秋壶冰月 | 大侠五级 |园豆:5903 | 2014-05-25 10:32

  秋壶冰月之前回答过我问题,再次谢谢你,不过开发文档上highcharts和数据库部分还没有更新,不知道代码怎么写

中华神 | 园豆:48 (初学一级) | 2014-05-25 10:35

@中华神: http://www.cnblogs.com/liuhaorain/archive/2012/01/24/2311352.html

上次没帮到你,不好意思哈!这个应该能帮到你,先初始化一些参数,用一个全局变量接收,这样我们Ajax加载数据,就能添加全局变量中

秋壶冰月 | 园豆:5903 (大侠五级) | 2014-05-25 22:13
其他回答(1)
0

ajax返回json,在通过json把数据发到data上面就可以了

最近刚好研究过highcharts!

刘宏玺 | 园豆:14020 (专家六级) | 2014-05-25 10:17

  尊敬的大神,给点代码可以吗?万分感谢!!

支持(0) 反对(0) 中华神 | 园豆:48 (初学一级) | 2014-05-25 10:23

@中华神: 

<%@ 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>&nbsp;&nbsp;
                                        <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;
            }
        }
    }
}
支持(0) 反对(0) 刘宏玺 | 园豆:14020 (专家六级) | 2014-05-26 13:28

@刘宏玺: 非常感谢 我正好需要  当做参考  获益良多

支持(0) 反对(0) 任督二脉 | 园豆:200 (初学一级) | 2015-12-30 14:29
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册