ASP.NET动态绑定HighCharts图表控件

最新推荐文章于 2023-11-08 13:55:16 发布

呆瓜丶

最新推荐文章于 2023-11-08 13:55:16 发布

阅读量1.1k

点赞数

分类专栏：菜鸟心得文章标签： asp.net HighCharts 绑定数据

本文链接：https://blog.csdn.net/u011498721/article/details/50428002

版权

菜鸟心得专栏收录该内容

20 篇文章 1 订阅

订阅专栏

前台代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SignIssuedCharts.aspx.cs" Inherits="TailGasMonitor.Web.Sign.SignIssuedCharts" %>

<!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>
    <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">
        var chart;
        $(document).ready(function() {
            chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'container',
                    defaultSeriesType: 'bar'
                },
                title: {
                    text: '发标点标志发放情况'
                },
                subtitle: {
                    text: 'Source: 发标点'   //图标的副标题
                },
                xAxis: {
                    categories: <%= xAxisCategories %>,//从后台获取数据
                tickPixelInterval:0.5,
                title: {
                    text: null
                }
            },
            yAxis: {
                min: 0,
                title: {
                    text: '数量 (个)',
                    align: 'high'
                }
            },
            tooltip: {
                formatter: function() {
                    return ''+
                         this.series.name +': '+ this.y +' 个';
                }
            },
            plotOptions: {
                column: {
                    pointPadding: 0.3,
                    borderWidth: 0 
                },
                bar: {
                    dataLabels: {
                        enabled: true
                    }
                }
            },
            legend: {
                layout: 'horizontal',
                align: 'center',
                verticalAlign: 'top',
                y: 50,
                borderWidth: 1,
                backgroundColor: '#FFFFFF',
                borderColor: '#CCC',
                shadow: true
            },
            credits: {
                enabled: false
            },
            series: <%= returnValue %> //此处数据从后台获取
            });
    });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <div id="container" style="width: 700px; height: <%=containerHeight%>; margin: 0 2em"></div>
        </div>
    </form>
</body>
</html>

后台代码：

using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace TailGasMonitor.Web.Sign
{
    public partial class SignIssuedCharts : System.Web.UI.Page
    {
        public string returnValue = "";//"[{name: '总量',data: [1,2]}]";
        public string xAxisCategories = "";//"['一号发标点', '二号发表点']";
        public string containerHeight = "400px";
        BLL.T_DATA_SIGNISSUED bll = new BLL.T_DATA_SIGNISSUED();
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                BindData();
            }
        }

        protected void BindData()
        {
            DataTable dt = bll.GetSignIssuedList("-1", "-1", null, null);
            if (dt.Rows.Count > 0)
            {
                if (dt.Rows.Count > 4)
                {
                    containerHeight = (dt.Rows.Count * 50).ToString() + "px";
                }
                else
                {
                    containerHeight = "200px";
                }
                string dataY1 = "[{name: '总量',data: [";
                string dataY2 = "{name: '有效量',data: [";
                string dataY3 = "{name: '无效量',data: [";
                string dataY4 = "{name: '作废量',data: [";
                string dataX = "[";
                foreach (DataRow dr in dt.Rows)
                {
                    dataX += "'" + dr["pointname"].ToString() + "',";
                    dataY1 += dr["zlnum"].ToString() + ",";
                    dataY2 += dr["yxnum"].ToString() + ",";
                    dataY3 += dr["wxnum"].ToString() + ",";
                    dataY4 += dr["zfnum"].ToString() + ",";
                }
                xAxisCategories = dataX.Substring(0, dataX.Length - 1) + "]";
                returnValue = dataY1.Substring(0, dataY1.Length - 1) + "]}," + dataY2.Substring(0, dataY2.Length - 1) + "]}," 
                    + dataY3.Substring(0, dataY3.Length - 1) + "]}," + dataY4.Substring(0, dataY4.Length - 1) + "]}]";
            }
        }
    }
}

呆瓜丶

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
ASP.NET动态绑定HighCharts图表控件

前台代码： var chart; $(document).ready(function() { chart = new Highcharts.Chart({ chart: { renderTo: '
复制链接

扫一扫

专栏目录