(三)、使用HighCharts创建第一个图表实例

简介: 在你的项目中引入上一篇中提到的js文件,项目根目录下新建一个JS文件夹,然后将前面下载的js文件放入该文件夹下,放入后的效果如下:  在前台aspx页面中,引入以上js文件,如下:...

在你的项目中引入上一篇中提到的js文件,项目根目录下新建一个JS文件夹,然后将前面下载的js文件放入该文件夹下,放入后的效果如下:

 

 

在前台aspx页面中,引入以上js文件,如下:

<script src="JS/jquery1.5.2.js" type="text/javascript"></script>
<script src="JS/HighCharts/highcharts.js" type="text/javascript"></script>
<!-- 添加主题样式js文件 -->
<script src="JS/HighCharts/themes/grid.js" type="text/javascript"></script>
<!--添加导出模式 -->
<script src="JS/HighCharts/modules/exporting.js" type="text/javascript"></script>

 

接下来,看下Script脚本中的内容:

 

     <script type="text/javascript">
        var chart;
        $(document).ready(function () {
            chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'container',
                    defaultSeriesType: 'area', //图表类型 line, spline, area, areaspline, column, bar, pie , column,scatter
                    inverted: false //左右显示,默认上下正向。假如设置为true,则横纵坐标调换位置
                },
                xAxis: {
                    categories: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'], //X轴的坐标值
                    title: { text: '周数'}  //Y轴坐标标题  labels:纵柱标尺
                },
                yAxis: {
                    title: { text: '人数(人)' },  //Y轴坐标标题  labels:纵柱标尺
                    min: 0
                },
                tooltip: {
                    formatter: function () {
                        //当鼠标悬置数据点时的格式化提示
                        return '总人数:' + Highcharts.numberFormat(this.y, 1) + '人<br/>当前周:' + this.x;
                    }
                },
                credits: {
                    enabled: false
                },
                plotOptions: {
                    column: {
                        pointPadding: 0.2,  //图表柱形的
                        borderWidth: 0      //图表柱形的粗细
                    }, bar: {
                        dataLabels: {
                            enabled: false
                        }
                    }
                },
                title: { text: '图表主标题' }, //图表主标题
                subtitle: { text: '图表子标题' }, //图表副标题
                series: [{ name: '人数', data: [20, 40, 30, 90, 100, 60, 50]}]
            });
        });
    </script>

 

里面字段有注释,很容易看得出各个字段的意义。

 

 

下面贴出全部代码,及效果图:

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head2" runat="server">
    <title></title>
    <script src="JS/jquery1.5.2.js" type="text/javascript"></script>
    <script src="JS/HighCharts/highcharts.js" type="text/javascript"></script>
    <!-- 添加主题样式js文件 -->
    <script src="JS/HighCharts/themes/grid.js" type="text/javascript"></script>
    <!--添加导出模式 -->
    <script src="JS/HighCharts/modules/exporting.js" type="text/javascript"></script>
    <script type="text/javascript">
        var chart;
        $(document).ready(function () {
            chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'container',
                    defaultSeriesType: 'area', //图表类型 line, spline, area, areaspline, column, bar, pie , column,scatter
                    inverted: false //左右显示,默认上下正向。假如设置为true,则横纵坐标调换位置
                },
                xAxis: {
                    categories: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'], //X轴的坐标值
                    title: { text: '周数'}  //Y轴坐标标题  labels:纵柱标尺
                },
                yAxis: {
                    title: { text: '人数(人)' },  //Y轴坐标标题  labels:纵柱标尺
                    min: 0
                },
                tooltip: {
                    formatter: function () {
                        //当鼠标悬置数据点时的格式化提示
                        return '总人数:' + Highcharts.numberFormat(this.y, 1) + '人<br/>当前周:' + this.x;
                    }
                },
                credits: {
                    enabled: false
                },
                plotOptions: {
                    column: {
                        pointPadding: 0.2,  //图表柱形的
                        borderWidth: 0      //图表柱形的粗细
                    }, bar: {
                        dataLabels: {
                            enabled: false
                        }
                    }
                },
                title: { text: '图表主标题' }, //图表主标题
                subtitle: { text: '图表子标题' }, //图表副标题
                series: [{ name: '人数', data: [20, 40, 30, 90, 100, 60, 50]}]
            });
        });
    </script>
</head>
<body>
    <form id="form2" runat="server">
    <div>
        <div id="container" style="width: 800px; height: 400px; margin: 0 auto">
        </div>
    </div>
    </form>
</body>
</html>


 

 

如果将代码中defaultSeriesType: 'column'修改成
                    defaultSeriesType: 'spline', //图表类型 line, spline, area, areaspline, column, bar, pie , column,scatter

则样式样式如下:

 

如果将代码中defaultSeriesType: 'column'修改成
                    defaultSeriesType: 'area', //图表类型 line, spline, area, areaspline, column, bar, pie , column,scatter

则样式样式如下:


相关文章
|
存储 安全 网络安全
探究网络安全与信息安全:漏洞、加密与安全意识
在当今数字化时代,网络安全和信息安全日益受到重视。本文将深入探讨网络安全漏洞、加密技术以及安全意识等方面的知识,帮助读者更好地了解和应对网络安全挑战。通过分析现有漏洞、介绍加密技术原理以及强调安全意识的重要性,旨在提升读者对网络安全的认识和应对能力。
88 27
|
机器学习/深度学习 人工智能 城市大脑
城市大脑 | 智慧交通运输综合解决方案
本文介绍了城市大脑 | 智慧交通运输综合解决方案的方案概述,方案价值及优势以及最佳实践。
城市大脑 | 智慧交通运输综合解决方案
|
13天前
|
存储 弹性计算 人工智能
【2025云栖精华内容】 打造持续领先,全球覆盖的澎湃算力底座——通用计算产品发布与行业实践专场回顾
2025年9月24日,阿里云弹性计算团队多位产品、技术专家及服务器团队技术专家共同在【2025云栖大会】现场带来了《通用计算产品发布与行业实践》的专场论坛,本论坛聚焦弹性计算多款通用算力产品发布。同时,ECS云服务器安全能力、资源售卖模式、计算AI助手等用户体验关键环节也宣布升级,让用云更简单、更智能。海尔三翼鸟云服务负责人刘建锋先生作为特邀嘉宾,莅临现场分享了关于阿里云ECS g9i推动AIoT平台的场景落地实践。
【2025云栖精华内容】 打造持续领先,全球覆盖的澎湃算力底座——通用计算产品发布与行业实践专场回顾
|
5天前
|
云安全 人工智能 安全
Dify平台集成阿里云AI安全护栏,构建AI Runtime安全防线
阿里云 AI 安全护栏加入Dify平台,打造可信赖的 AI
|
12天前
|
人工智能 自然语言处理 自动驾驶
关于举办首届全国大学生“启真问智”人工智能模型&智能体大赛决赛的通知
关于举办首届全国大学生“启真问智”人工智能模型&智能体大赛决赛的通知
|
8天前
|
人工智能 运维 Java
Spring AI Alibaba Admin 开源!以数据为中心的 Agent 开发平台
Spring AI Alibaba Admin 正式发布!一站式实现 Prompt 管理、动态热更新、评测集构建、自动化评估与全链路可观测,助力企业高效构建可信赖的 AI Agent 应用。开源共建,现已上线!
768 23