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

最新推荐文章于 2023-11-06 00:49:58 发布

weixin_44376592

最新推荐文章于 2023-11-06 00:49:58 发布

阅读量958

点赞数 2

本文链接：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: '销售额 (元)'