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

首先下载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) + "]}]";}}
}

最终效果图

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

SQL Server 2008 Analysis Services 多维数据库一步一步从入门到精通
SQL Server 2008 Analysis Services 多维数据库一步一步从入门到精通(一) 创建 Analysis Services 项目(图) 在开始之前,我的电脑上已经完整的安装了S ...
SQL Server 2008 R2——ROW_NUMBER() 去掉不同行中相同列的重复内容
原文:SQL Server 2008 R2--ROW_NUMBER() 去掉不同行中相同列的重复内容 ==================================声明============= ...
GridView控件RowDataBound事件中获取列字段值的几种途径
前台: <asp:TemplateField HeaderText="充值总额|账号余额"><ItemTemplate><asp:Label ID=& ...
笔记-Microsoft SQL Server 2008技术内幕：T-SQL语言基础-08 数据修改
插入数据 T-SQL提供了几种数据插入的语句:INSERT VALUES.INSERT SELECT.INSERT EXEC.SELECT INTO及BULK INSERT. INSERT VALUE ...
SQL Server 2008故障转移集群+数据库镜像配置实例之三
前两篇文章已经建立了SQL 2008 的故障转移集群,由于故障转移集群存在一个单点故障,既是当网络存储设备不可用时,整个集群就不可用了.所以为了获得更好的高可用特性和容灾机制,我们可以将集群中的某一特 ...
SQL Server 2008 R2 里迁移系统数据库的方法
针对不同的场景,采用不同的步骤. 对非master以及resource系统数据库而言,分两种情况. 1.非master以及resource系统数据库正常. 这里以迁移msdb为例,将msdb从D:\S ...
GridView控件RowDataBound事件中获取列字段的几种方法(转)
GridView是ASP.NET中功能强大的数据显示控件,它的RowDataBound事件为我们提供了方便的控制行.列数据的途径. 软件开发网 www.mscto.com 要获取当前行的某个数据列,有 ...
GridView控件RowDataBound事件中获取列字段的几种途径
GridView是ASP.NET中功能强大的数据显示控件,它的RowDataBound事件为我们提供了方便的控制行.列数据的途径. 要获取当前行的某个数据列,我在实践中总结有如下几种方法: 1. Ce ...
android中ListView控件onItemClick事件中获取listView传递的数据
http://blog.csdn.net/aben_2005/article/details/6592205 本文转载自:android中ListView控件&&onItemClick ...
报表控件Stimulsoft报告中的数据矩阵条形码介绍
本连载系列教程将介绍Stimulsoft Report 中创建二维条形码的文章,以及如何在 Stimulsoft 工具中创建的报告中使用它们.本系列的第一篇文章是关于 DataMatrix 条形码的, ...

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

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

最新文章

热门文章