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

则样式样式如下:


相关文章
ECharts 饼图数据放在饼图内部显示
ECharts 饼图数据放在饼图内部显示
251 0
Echarts组件legend属性显示数据和icon图片自定义的解决方案
Echarts组件legend属性显示数据和icon图片自定义的解决方案
377 0
|
23天前
|
JavaScript 数据可视化 开发者
echart:所有类型的图
本文档介绍了基于 Vue 3 的 ECharts 基础代码示例,包括柱状图、折线图、饼状图、环状图、散点图和雷达图的配置和使用方法。每个图表类型都提供了详细的代码示例和配置说明,帮助开发者快速上手并实现各种图表展示效果。
|
2月前
|
Web App开发 数据可视化 前端开发
Echart的使用初体验,Echarts的基本使用及语法格式,简单图表绘制和使用及图例添加【学习笔记】
本文介绍了ECharts的基本使用和语法格式,包括如何引入ECharts、创建容器、初始化echarts实例对象、配置option参数和一些基础图表的绘制方法。文章还提供了简单图表绘制和使用图例添加的示例代码,以及对ECharts特性和优势的概述。
Echart的使用初体验,Echarts的基本使用及语法格式,简单图表绘制和使用及图例添加【学习笔记】
|
6月前
|
数据可视化 前端开发 定位技术
echarts 关于折线统计图常用的属性设置--超详细(附加源码)
echarts 关于折线统计图常用的属性设置--超详细(附加源码)
128 0
|
11月前
|
容器
Echarts 创建饼状图-入门实例
Echarts 创建饼状图-入门实例
|
11月前
【ECharts学习】—实现我的第一个图表
【ECharts学习】—实现我的第一个图表
|
前端开发
【前端统计图】echarts实现属性修改
【前端统计图】echarts实现属性修改
61 0
|
前端开发
【前端统计图】echarts改变颜色属性的demo
【前端统计图】echarts改变颜色属性的demo
41 0
|
容器
Echarts实战案例代码(30):同一个id空间Tab按钮显示不同图表防止叠加的解决方案
Echarts实战案例代码(30):同一个id空间Tab按钮显示不同图表防止叠加的解决方案
97 0