(三)、使用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

则样式样式如下:


相关文章
|
存储 安全 网络安全
探究网络安全与信息安全:漏洞、加密与安全意识
在当今数字化时代,网络安全和信息安全日益受到重视。本文将深入探讨网络安全漏洞、加密技术以及安全意识等方面的知识,帮助读者更好地了解和应对网络安全挑战。通过分析现有漏洞、介绍加密技术原理以及强调安全意识的重要性,旨在提升读者对网络安全的认识和应对能力。
82 27
|
机器学习/深度学习 人工智能 城市大脑
城市大脑 | 智慧交通运输综合解决方案
本文介绍了城市大脑 | 智慧交通运输综合解决方案的方案概述,方案价值及优势以及最佳实践。
城市大脑 | 智慧交通运输综合解决方案
|
6天前
|
存储 关系型数据库 分布式数据库
PostgreSQL 18 发布,快来 PolarDB 尝鲜!
PostgreSQL 18 发布,PolarDB for PostgreSQL 全面兼容。新版本支持异步I/O、UUIDv7、虚拟生成列、逻辑复制增强及OAuth认证,显著提升性能与安全。PolarDB-PG 18 支持存算分离架构,融合海量弹性存储与极致计算性能,搭配丰富插件生态,为企业提供高效、稳定、灵活的云数据库解决方案,助力企业数字化转型如虎添翼!
|
17天前
|
弹性计算 关系型数据库 微服务
基于 Docker 与 Kubernetes(K3s)的微服务:阿里云生产环境扩容实践
在微服务架构中,如何实现“稳定扩容”与“成本可控”是企业面临的核心挑战。本文结合 Python FastAPI 微服务实战,详解如何基于阿里云基础设施,利用 Docker 封装服务、K3s 实现容器编排,构建生产级微服务架构。内容涵盖容器构建、集群部署、自动扩缩容、可观测性等关键环节,适配阿里云资源特性与服务生态,助力企业打造低成本、高可靠、易扩展的微服务解决方案。
1327 7
|
5天前
|
存储 人工智能 Java
AI 超级智能体全栈项目阶段二:Prompt 优化技巧与学术分析 AI 应用开发实现上下文联系多轮对话
本文讲解 Prompt 基本概念与 10 个优化技巧,结合学术分析 AI 应用的需求分析、设计方案,介绍 Spring AI 中 ChatClient 及 Advisors 的使用。
301 129
AI 超级智能体全栈项目阶段二:Prompt 优化技巧与学术分析 AI 应用开发实现上下文联系多轮对话
|
4天前
|
监控 JavaScript Java
基于大模型技术的反欺诈知识问答系统
随着互联网与金融科技发展,网络欺诈频发,构建高效反欺诈平台成为迫切需求。本文基于Java、Vue.js、Spring Boot与MySQL技术,设计实现集欺诈识别、宣传教育、用户互动于一体的反欺诈系统,提升公众防范意识,助力企业合规与用户权益保护。
|
16天前
|
机器学习/深度学习 人工智能 前端开发
通义DeepResearch全面开源!同步分享可落地的高阶Agent构建方法论
通义研究团队开源发布通义 DeepResearch —— 首个在性能上可与 OpenAI DeepResearch 相媲美、并在多项权威基准测试中取得领先表现的全开源 Web Agent。
1396 87