ASP.NET+Sql Server 2008 +highchart控件从数据库中获取数据生成饼状图柱状图

最新推荐文章于 2021-12-02 16:18:06 发布
最新推荐文章于 2021-12-02 16:18:06 发布
阅读量925 收藏 12
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44376592/article/details/90239827
版权

首先下载highchart控件
下载地址：(https://www.highcharts.com.cn/download)
在这里插入图片描述
下载解压后复制到网站的根目录下，然后引入控件中的js文件

    <script src="Highcharts-7.1.1/code/themes/jquery-3.2.1.min.js" type="text/javascript"></script>    
    <script src="Highcharts-7.1.1/code/highcharts.js" type="text/javascript"></script>   
    <script src="Highcharts-7.1.1/code/modules/exporting.js" type="text/javascript"></script>

前台代码完整代码如下：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Stafftubiao.aspx.cs" Inherits="Stafftubiao" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="Highcharts-7.1.1/code/themes/jquery-3.2.1.min.js" type="text/javascript"></script>    
    <script src="Highcharts-7.1.1/code/highcharts.js" type="text/javascript"></script>   
    <script src="Highcharts-7.1.1/code/modules/exporting.js" type="text/javascript"></script>
    <title></title>
    <style>
        body {
            margin:40px auto;
           width:1215px;
            display:block
        }
    </style>
     <script type="text/javascript">
        var chart;    //柱状图
        $(document).ready(function() {
            chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'container1',
                    defaultSeriesType: 'column'
                },
                title: {
                    text: '近5个月销售业绩'
                },
                subtitle: {
                  //  text: 'Source: 下级人员'   //图标的副标题
                },
                xAxis: {
                    categories: <%= xAxisCategories %>,//从后台获取数据
                    tickPixelInterval:0.2,
                    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:<%=returnzhuzhangValue %>//此处数据从后台获取
            });
        });
    </script>
    
</head>
<body>
    <form id="form1" runat="server">
    <div style="display:inline-block">
    <div id="container" style="display:inline-block; width:400px;height:400px;border:1px solid #ccc"></div>
           <script type="text/javascript">
         Highcharts.chart('container', {
             chart: {                         //饼图
                 plotBackgroundColor: null,
                 plotBorderWidth: null,
                 plotShadow: false,
                 type: 'pie'
             },
             title: {
                 text: '各部门人员分布占比'
             },
             tooltip: {
               /*  pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'*/

                 formatter: function() {
                     return '<b>'+ this.point.name +'</b>: '+ Highcharts.numberFormat(this.percentage, 1) +'% ('+
                          Highcharts.numberFormat(this.y, 0, ',') +' 人)';
         }
             },
             plotOptions: {
                 pie: {
                     allowPointSelect: true,
                     cursor: 'pointer',
                     dataLabels: {
                         enabled: false,                    
                     },
                     showInLegend: true
                 }
             },
             credits: {
                 enabled: false
             },
             series:<%=returnbingValue %>//此处数据从后台获取

    });
       </script>
        <div id="container1" style="display:inline-block; width:400px;height:400px;border:1px solid #ccc"></div>
        <div id="container2" style="display:inline-block; width:400px;height:400px;border:1px solid #ccc"></div>
          <script type="text/javascript">
         Highcharts.chart('container2', {
             chart: {                         //饼图
                 plotBackgroundColor: null,
                 plotBorderWidth: null,
                 plotShadow: false,
                 type: 'pie'
             },
             title: {
                 text: '员工学历分布占比'
             },
             tooltip: {
               /*  pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'*/

                 formatter: function() {
                     return '<b>'+ this.point.name +'</b>: '+ Highcharts.numberFormat(this.percentage, 1) +'% ('+
                          Highcharts.numberFormat(this.y, 0, ',') +' 人)';
         }


             },
             plotOptions: {
                 pie: {
                     allowPointSelect: true,
                     cursor: 'pointer',
                     dataLabels: {
                         enabled: false,
                         
                            
                     },
                     showInLegend: true
                 }
             },
             credits: {
                 enabled: false
             },
             series:<%=returnbingxueliValue %>//此处数据从后台获取

    });
       </script>
    </div>

    </form>
</body>
</html>

后台代码：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
using System.Xml;
using System.Configuration;

public partial class Stafftubiao : System.Web.UI.Page
{
    public string returnzhuzhangValue = "";
    public string returnbingValue = "";
    public string returnbingxueliValue = "";
    public string xAxisCategories = "";
    public string xAxisCategories1 = "";
    public string containerHeight = "400px";
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            Loadzhuzhang(); 
            Loadbingtu();
            Loadbingtu1();
        }
    }

    protected void Loadzhuzhang()
    {
        SqlConnection sqlcon = new SqlConnection(ConfigurationManager.ConnectionStrings["connection"].ConnectionString);
        sqlcon.Open();
       
        string strsqls = "select top 5 LEFT(date,7) as month,SUM(CONVERT(INT,[yugujine])) as 销售额 from yejibiao group by LEFT(date,7)  order by LEFT(date,7) desc";
        SqlDataAdapter adsa = new SqlDataAdapter(strsqls, sqlcon);
        DataSet adds = new DataSet();
        adsa.Fill(adds);
        DataTable dt = adds.Tables[0];
        if (dt.Rows.Count > 0)
        {
            if (dt.Rows.Count > 4)
            {
                containerHeight = (dt.Rows.Count * 50).ToString() + "px";
            }
            else
            {
                containerHeight = "200px";
            }
            string dataY = "[{name: '销售业绩',data: [";
            string dataX = "[";
            foreach (DataRow dr in dt.Rows)
            {
                dataX += "'" + dr["month"].ToString() + "',";
                dataY += dr["销售额"].ToString() + ",";
            }
            xAxisCategories = dataX.Substring(0, dataX.Length - 1) + "]";
            returnzhuzhangValue = dataY.Substring(0, dataY.Length - 1) + "]}]";
        }
    }
    protected void Loadbingtu()
    {
        SqlConnection sqlcon = new SqlConnection(ConfigurationManager.ConnectionStrings["connection"].ConnectionString);
        sqlcon.Open();
       
        string strsqls = "SELECT emp_bumen, COUNT(emp_bumen) AS 人数 FROM staff where emp_bumen is not null GROUP BY emp_bumen";
        SqlDataAdapter adsa = new SqlDataAdapter(strsqls, sqlcon);
        DataSet adds = new DataSet();
        adsa.Fill(adds);
        DataTable dt = adds.Tables[0];
        if (dt.Rows.Count > 0)
        {
            if (dt.Rows.Count > 4)
            {
                containerHeight = (dt.Rows.Count * 50).ToString() + "px";
            }
            else
            {
                containerHeight = "200px";
            }
            string dataY = "[{name: '人员分布情况',data: [";
            string dataX = "[";
            foreach (DataRow dr in dt.Rows)
            {
                dataX += "'" + dr["emp_bumen"].ToString() + "',";
                //   dataX += "'妖怪',";
                //   dataY += dr["人数"].ToString() + ",";
                dataY += "['" + dr["emp_bumen"].ToString() + "'," + dr["人数"].ToString() + "],";
            }
            xAxisCategories1 = dataX.Substring(0, dataX.Length - 1) + "]";
            returnbingValue = dataY.Substring(0, dataY.Length - 1) + "]}]";

        }
    }

    protected void Loadbingtu1() //学历分布
    {
        SqlConnection sqlcon = new SqlConnection(ConfigurationManager.ConnectionStrings["connection"].ConnectionString);
        sqlcon.Open();

        string strsqls = "SELECT emp_xueli, COUNT(emp_xueli) AS 人数 FROM staff where emp_xueli is not null GROUP BY emp_xueli";
        SqlDataAdapter adsa = new SqlDataAdapter(strsqls, sqlcon);
        DataSet adds = new DataSet();
        adsa.Fill(adds);
        DataTable dt = adds.Tables[0];
        if (dt.Rows.Count > 0)
        {
            if (dt.Rows.Count > 4)
            {
                containerHeight = (dt.Rows.Count * 50).ToString() + "px";
            }
            else
            {
                containerHeight = "200px";
            }
            string dataY = "[{name: '学历分布情况',data: [";
            string dataX = "[";
            foreach (DataRow dr in dt.Rows)
            {
                dataX += "'" + dr["emp_xueli"].ToString() + "',";
                //   dataX += "'妖怪',";
                //   dataY += dr["人数"].ToString() + ",";
                dataY += "['" + dr["emp_xueli"].ToString() + "'," + dr["人数"].ToString() + "],";
            }
            xAxisCategories1 = dataX.Substring(0, dataX.Length - 1) + "]";
            returnbingxueliValue = dataY.Substring(0, dataY.Length - 1) + "]}]";

        }
    }
}

最终效果图
在这里插入图片描述

weixin_44376592
关注
  • 2
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
完整版echarts实时显示sql数据库数据
qq_25827785的博客
12-12 1万+
** 首先讲一讲！echarts官网很多很多的例子都是静态数据，对于开发者后续的开发确实不太友好，而且网上许多地方都是部分重要代码，对初学者而言也难以整体掌握。当然我也是初学者中的一员，这次成功的实现可视化之后就打算写篇完整的代码提供给初学者学习。 ** 首先新建web项目； 给点初始化dom（记得引入echarts、jquery文件） <div id="main" style="hei...
highcharts实现从mysql数据库获取数据生成折线图
01-18
总结起来，要实现"highcharts实现从mysql数据库获取数据生成折线图"，你需要： 1. 安装并配置MySQL数据库。 2. 使用Highcharts在HTML页面上创建一个基础的折线图。 3. 在Java环境中，通过JDBC连接MySQL，获取实时...
c# HighCharts使用
weixin_30875157的博客
07-05 508
最近接到个图形报表的需求，网络上找了几个插件，最后决定用highcharts 需要的文件 1、bll文件，添加到项目引用 http://files.cnblogs.com/files/lovejunjuan/HighChartsMvc.Model.rar 2、js文件，在项目中添加引用 http://files.cnblogs.com/files/lovejunjuan/highc...
【ORACLE】在plsql中通过几条简单的命令生成运维可视化图表html页面
DarkAthena的博客
12-02 1815
前言 其实本来不想写这篇的，因为这对于前端的入门开发者再简单不过了，只是因为最近看到一位DBA老哥为了生成图表各种折腾，又联想起我原来所在公司的DBA经常找我请教一些自动化流程如何用sql或者plsql实现，实在是忍不住了。 业务报表或者运维报表的自动生成，在一些公司应该是基本操作，开发语言用java的、php的、python的，五花八门，甚至还有直接bat或者shell写静态html的。至于优秀的可视化报表图表平台，更是数不胜数了。只要找个开发问问，没准他几分钟内就帮你搞定了，甚至还可以自动发邮件、企业微
在 ASP.NET MVC 中使用 Chart 控件
weixin_30872671的博客
07-25 201
在 .NET 3.5 的时候，微软就提供了一个 Chart 控件，网络上有大量的关于在 VS2008 中使用这个控件的文章，在 VS2010 中，这个控件已经被集成到 ASP.NET 4.0 中，可以从工具箱中直接使用了。 这个控件在 ASP.NET 经典的页面中很容易使用，但是在 ASP.NET MVC 中使用，却会出现各种问题。 网上有的说可以这样处理，在 Global...
SQLSever2008 创建视图
LPPTREE的专栏
09-10 534
1）打开数据库，点击视图-新建视图； 2）我这里没有和其他表关联，等到用到和其他表关联的时候我再补充。    这个视图产生一个随机数，弹出的小窗口直接关闭，SELECT rand() AS getRandData，执行一下就可以看到视图的结构已经变了，然后保存视图的名字。
动态数据，通过highcharts实现三级下钻
chenacxz的博客
01-21 1121
##更新于2019-06-14,特地写了一份demo，有需要的可以直接去网盘下载，下载解压后即可运行 链接：https://pan.baidu.com/s/1MK4kvMA2NZBVgZip0QEWwQ提取码：9hyz 首先导入所需的文件：所需highcharts文件，提取码：e2az，前端用的jsp <script src="${ctx}/admin/js/drilldow...
HighCharts图表控件在ASP.NET WebForm中的使用总结（全）
09-03
DoNet.HighCharts适用于Visual Studio 2008+ASP.NET MVC3+.NET 3.5或Visual Studio 2010+.NET 4.0的开发环境。该开源项目以ASP.NET MVC3 Project的形式发布，开发者可以从示例控制器（如DemoController）中学习如何...
highcharts快速生成百万数据点折线图.rar
12-15
Highcharts是一款广泛应用于Web开发中的JavaScript图表库，它能够帮助开发者轻松创建各种动态、交互式的图表，包括折线图、柱状图、饼图等多种类型。在处理大数据量时，Highcharts提供了高效的优化策略，使得即使...
使用Highcharts结合PHP与Mysql生成饼状图
02-29
使用Highcharts结合PHP与Mysql生成饼状图 为了更好的讲解，实例中在Mysql数据库中建立一张表chart_pie，用于表示各搜索引擎带来的访问量，表中分别有id、title和pv三个字段，id是自增长整型、主键；title表示搜素...
asp.net(c#) 与 highcharts 数据库交互
06-16
可实现 highcharts 和 数据库交互。内附：效果图及相关js
asp代码实现生成图表（ASP.NET）
11-27
ASP代码中包含生成excel数据表、生成饼状图表、生成折线图表、生成柱状图表、生成混合图表、通过代码生成图表等代码，下载解压后可直接打开
ASP.NET绑定sql数据库采用echarts显示数据图表(实现了柱状图和饼图).zip
12-12
ASP.NET绑定sql数据库采用echarts显示数据图表，已封装成类文件
highcharts表格制作柱状图的Demo
09-21
Highcharts是一款强大的JavaScript图表库，它能够帮助开发者创建各种类型的图表，包括柱状图、折线图、饼图等，以直观地展示数据。在这个"highcharts表格制作柱状图的Demo"中，我们将深入探讨如何使用Highcharts来...
在网页上实现实时动态曲线——利用Highcharts控件和JQuery
热门推荐
思考的力量
09-06 5万+
Web上实现动态曲线 ——实时地从数据库中获取数据，并在网页上实现无刷新显示。        本文利用JavaScript实现，每隔3秒，从数据库中获取一个数据，并在网页上动态显示。并且当用鼠标靠近曲线的点时，能够显示改点的相应的信息（横坐标和纵坐标值）。效果图（网页截图）如下图： 实现工具：Highcharts（www.highcharts.com/）和JQuery（http://jq
在ASP.NET中使用Highcharts js图表
周公（周金桥）的专栏
04-07 1万+
从事过ASP.NET开发的可能都会接触到一些图表控件，比如OWC、ZendGraph等等，这些控件都有一个特点，那就是我们可以像操作.NET中的对象一样控制它们的某些属性，有可能在本地开发好了上传到服务器端部署运行的时候会出现权限问题而导致不能正常运行。本篇周公讲述一个JavaScript的图表控件，不要小看了这个JavaScript图表控件，它能生成各种常见的图表。Highcharts是一个JavaScript的图表控件，它的官方网站网址是：http://www.highcharts.com/，参考手册网
ASP.NET动态绑定HighCharts图表控件
呆瓜丶的菜鸟技术分享
12-29 1185
前台代码： var chart; $(document).ready(function() { chart = new Highcharts.Chart({ chart: { renderTo: '
asp.net 常用知识点汇总整理
分享经验，共同进步.
07-16 3023
1、后台动态创建DataTable，并绑定Repeater DataTable dtNew = new DataTable(); dtNew.Columns.Add("Name", typeof(string)); dtNew.Columns["Name"].SetOrdinal(0); dtNew.Co
highchart绘图subtitle画在图的下方
最新发布
06-10
要让 Highcharts 的 subtitle 画在图的下方，可以在 chart 的配置选项中设置 subtitle 的位置。具体做法如下： 1. 在 chart 的配置选项中添加 subtitle 属性。 2. 在 subtitle 属性中设置 y 值为负数，使得 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值