HighChart 折线图动态加载数据

最新推荐文章于 2024-04-20 11:50:28 发布

置顶程序猿1990

最新推荐文章于 2024-04-20 11:50:28 发布

阅读量2.3k

点赞数

分类专栏： HightChart 文章标签：动态加载 javascript

本文链接：https://blog.csdn.net/shenyan798092300/article/details/44923725

版权

HightChart 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

前台页面：

<head id="Head1" runat="server">
    <title></title>
   <script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
    <script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/exporting.js"></script>
 <script type="text/javascript">  
        function abc(series) {
            $('#container').highcharts({
                chart: {
                    type: 'line'
                },
                title: {
                    text: '故障检测次数折线图'
                },
                subtitle: {
                    text: 'Source: 故障检测预警平台'
                },
                xAxis: {
                    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
                },
                yAxis: {
                    title: {
                        text: '故障检测次数 (次)'
                    },
                    plotLines: [{
                        value: 0,
                        width: 1,
                        color: '#808080'
                    }]
                },
                credits: {
                    enabled: false // 清除HighChart logo 
                },
                plotOptions: {
                    series: {
                        cursor: 'pointer',
                        events: {
                            click: function (event) {
                                $("#result").html("<b>Result : index = " + event.point.x + " , series = " + this.name + ', x = ' + event.point.category + ' ,y = ' + event.point.y + "</b>");//点击显示数据                              
                            }
                        }
                    }
                },
                series: eval('(' + series + ')')// 把字符串解析为json             
            });
        };                      
    </script>
</head>
<body>
    <div id="container" style="min-width: 700px; height: 500px">
    </div>
    <script type="text/javascript">
            $.post("LineChart.ashx", { action: "GetData" }, function (data) {
                abc(data);
            });//调用LineChart.ashx页面的GetData方法，并获得data
    </script>
</body>

LineChart.ashx页面（一般处理程序）

public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            string action = context.Request["action"];
            if (!string.IsNullOrEmpty(action))
            {
                switch (action)
                {
                    case "GetData": GetData(context); break;//获得动态数据                    
                }
            }
        }
        public void GetData(HttpContext context)
        {
            string allstr = "";
            string sum = "";
            string a = "";
            string b = "";
            string c = "";
            string d = "";
            DAL.Fault dalFault = new DAL.Fault();
            //循环读取数据库的Rule表
            string connstr = System.Configuration.ConfigurationManager.ConnectionStrings["connectionString"].ToString();//获取连接数据库参数
            using (MySqlConnection conn = new MySqlConnection(connstr))
            {
                conn.Open();
                MySqlCommand cmd = new MySqlCommand("select * from fault", conn);
                MySqlDataReader dr = cmd.ExecuteReader();
                //将结果赋值到了dr，下面开始输出                    
                while (dr.Read())
                {
                    //获得typeid                
                    string typeid = dr[2].ToString();
                    string str1 = "";
                    string str2 = "";
                    if (typeid == "3")
                    {
                        string typename = "数据库检测";
                        string strnew2 = "";
                        for (int i = 1; i <= 12; i++)
                        {
                            //获得总次数
                            DataSet dsSum = dalFault.GetSum("FaultMonth='" + i + "' and RuleTypeID='" + typeid + "'");
                            sum = dsSum.Tables[0].Rows[0][0].ToString();
                            if (!string.IsNullOrEmpty(sum))//判断不为空，做累加
                            {
                                str1 += sum + ",";
                            }
                            else
                            {
                                str1 += "0" + ",";
                            }
                        }
                        str2 = str1.Replace(",,", ",0,").Replace(",,", ",0,");//将,,替换成,0,
                        str2 = str2.Substring(0, str2.Length - 1);
                        strnew2 += "{" + "name:" + "'" + typename + "'," + "data:[" + str2 + "]}";//拼接字符串
                        a = strnew2;
                    }
                    else if (typeid == "2")
                    {
                        string str3 = "";
                        string str4 = "";
                        string strnew1 = "";
                        string typename = "服务检测";
                        for (int i = 1; i <= 12; i++)
                        {
                            //获得总次数
                            DataSet dsSum = dalFault.GetSum("FaultMonth='" + i + "' and RuleTypeID='" + typeid + "'");
                            sum = dsSum.Tables[0].Rows[0][0].ToString();
                            if (!string.IsNullOrEmpty(sum))
                            {
                                str3 += sum + ",";
                            }
                            else
                            {
                                str3 += "0" + ",";
                            }
                        }
                        str4 = str3.Replace(",,", ",0,").Replace(",,", ",0,");
                        str4 = str4.Substring(0, str4.Length - 1);
                        strnew1 += "{" + "name:" + "'" + typename + "'," + "data:[" + str4 + "]}";
                        b = strnew1;
                    }
                    else if (typeid == "1")
                    {
                        string str5 = "";
                        string str6 = "";
                        string strnew = "";
                        string typename = "网站检测";
                        for (int i = 1; i <= 12; i++)
                        {
                            //获得总次数
                            DataSet dsSum = dalFault.GetSum("FaultMonth='" + i + "' and RuleTypeID='" + typeid + "'");
                            sum = dsSum.Tables[0].Rows[0][0].ToString();
                            if (!string.IsNullOrEmpty(sum))
                            {
                                str5 += sum + ",";
                            }
                            else
                            {
                                str5 += "0" + ",";
                            }
                        }
                        str6 = str5.Replace(",,", ",0,").Replace(",,", ",0,");
                        str6 = str6.Substring(0, str6.Length - 1);
                        strnew += "{" + "name:" + "'" + typename + "'," + "data:[" + str6 + "]}";
                        c = strnew;
                    }
                    else
                    {
                        string str7 = "";
                        string str8 = "";
                        string strnew = "";
                        string typename = "服务器检测";
                        for (int i = 1; i <= 12; i++)
                        {
                            //获得总次数
                            DataSet dsSum = dalFault.GetSum("FaultMonth='" + i + "' and RuleTypeID='" + typeid + "'");
                            sum = dsSum.Tables[0].Rows[0][0].ToString();
                            if (!string.IsNullOrEmpty(sum))
                            {
                                str7 += sum + ",";
                            }
                            else
                            {
                                str7 += "0" + ",";
                            }
                        }
                        str8 = str7.Replace(",,", ",0,").Replace(",,", ",0,");
                        str8 = str7.Substring(0, str7.Length - 1);
                        strnew += "{" + "name:" + "'" + typename + "'," + "data:[" + str8 + "]}";
                        d = strnew;
                    }

                }
                //拼接总的字符串
                allstr = "[" + a + "," + b + "," + c + "," + d + "]";               
                if (!string.IsNullOrEmpty(allstr))
                {
                    //返回json字符串 格式：[{name:'检测',data:[1,2.3,4]},{..}] 每组大括号是一组检测数据
                    //newstr1 = "[{name: '网站检测',data: [1.0, 5.9, 9.5, 10.5, 18.4, 7.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]},{name: '网站检测',data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]}]";                    
                    context.Response.Write(allstr);
                    context.Response.End();
                }
                else
                {
                    context.Response.Write("测试呢");
                    context.Response.End();
                }
            }
        }