使用HighCharts创建第一个图表实例

最新推荐文章于 2020-01-03 20:00:05 发布
最新推荐文章于 2020-01-03 20:00:05 发布
阅读量1.6k 收藏
点赞数
 

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

标签： functionxhtmlserverdiv脚本
2011-04-15 15:32  22169人阅读  评论(17)  收藏  举报
  分类：
 

版权声明：本文为博主原创文章，未经博主允许不得转载。

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

 

 

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

[csharp]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. <script src="JS/jquery1.5.2.js" type="text/javascript"></script>  
  2. <script src="JS/HighCharts/highcharts.js" type="text/javascript"></script>  
  3. <!-- 添加主题样式js文件 -->  
  4. <script src="JS/HighCharts/themes/grid.js" type="text/javascript"></script>  
  5. <!--添加导出模式 -->  
  6. <script src="JS/HighCharts/modules/exporting.js" type="text/javascript"></script>  

 

接下来，看下Script脚本中的内容：

 

[csharp]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. <script type="text/javascript">  
  2.    var chart;  
  3.    $(document).ready(function () {  
  4.        chart = new Highcharts.Chart({  
  5.            chart: {  
  6.                renderTo: 'container',  
  7.                defaultSeriesType: 'area', //图表类型 line, spline, area, areaspline, column, bar, pie , column，scatter  
  8.                inverted: false //左右显示，默认上下正向。假如设置为true，则横纵坐标调换位置  
  9.            },  
  10.            xAxis: {  
  11.                categories: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'], //X轴的坐标值  
  12.                title: { text: '周数'}  //Y轴坐标标题  labels:纵柱标尺  
  13.            },  
  14.            yAxis: {  
  15.                title: { text: '人数(人)' },  //Y轴坐标标题  labels:纵柱标尺  
  16.                min: 0  
  17.            },  
  18.            tooltip: {  
  19.                formatter: function () {  
  20.                    //当鼠标悬置数据点时的格式化提示  
  21.                    return '总人数:' + Highcharts.numberFormat(this.y, 1) + '人<br/>当前周:' + this.x;  
  22.                }  
  23.            },  
  24.            credits: {  
  25.                enabled: false  
  26.            },  
  27.            plotOptions: {  
  28.                column: {  
  29.                    pointPadding: 0.2,  //图表柱形的  
  30.                    borderWidth: 0      //图表柱形的粗细  
  31.                }, bar: {  
  32.                    dataLabels: {  
  33.                        enabled: false  
  34.                    }  
  35.                }  
  36.            },  
  37.            title: { text: '图表主标题' }, //图表主标题  
  38.            subtitle: { text: '图表子标题' }, //图表副标题  
  39.            series: [{ name: '人数', data: [20, 40, 30, 90, 100, 60, 50]}]  
  40.        });  
  41.    });  
  42. lt;/script>  

 

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

 

 

下面贴出全部代码，及效果图：

[csharp]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="HighCharts_Default2" %>  
  2.   
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  4. <html xmlns="http://www.w3.org/1999/xhtml">  
  5. <head id="Head2" runat="server">  
  6.     <title></title>  
  7.     <script src="JS/jquery1.5.2.js" type="text/javascript"></script>  
  8.     <script src="JS/HighCharts/highcharts.js" type="text/javascript"></script>  
  9.     <!-- 添加主题样式js文件 -->  
  10.     <script src="JS/HighCharts/themes/grid.js" type="text/javascript"></script>  
  11.     <!--添加导出模式 -->  
  12.     <script src="JS/HighCharts/modules/exporting.js" type="text/javascript"></script>  
  13.     <script type="text/javascript">  
  14.         var chart;  
  15.         $(document).ready(function () {  
  16.             chart = new Highcharts.Chart({  
  17.                 chart: {  
  18.                     renderTo: 'container',  
  19.                     defaultSeriesType: 'area', //图表类型 line, spline, area, areaspline, column, bar, pie , column，scatter  
  20.                     inverted: false //左右显示，默认上下正向。假如设置为true，则横纵坐标调换位置  
  21.                 },  
  22.                 xAxis: {  
  23.                     categories: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'], //X轴的坐标值  
  24.                     title: { text: '周数'}  //Y轴坐标标题  labels:纵柱标尺  
  25.                 },  
  26.                 yAxis: {  
  27.                     title: { text: '人数(人)' },  //Y轴坐标标题  labels:纵柱标尺  
  28.                     min: 0  
  29.                 },  
  30.                 tooltip: {  
  31.                     formatter: function () {  
  32.                         //当鼠标悬置数据点时的格式化提示  
  33.                         return '总人数:' + Highcharts.numberFormat(this.y, 1) + '人<br/>当前周:' + this.x;  
  34.                     }  
  35.                 },  
  36.                 credits: {  
  37.                     enabled: false  
  38.                 },  
  39.                 plotOptions: {  
  40.                     column: {  
  41.                         pointPadding: 0.2,  //图表柱形的  
  42.                         borderWidth: 0      //图表柱形的粗细  
  43.                     }, bar: {  
  44.                         dataLabels: {  
  45.                             enabled: false  
  46.                         }  
  47.                     }  
  48.                 },  
  49.                 title: { text: '图表主标题' }, //图表主标题  
  50.                 subtitle: { text: '图表子标题' }, //图表副标题  
  51.                 series: [{ name: '人数', data: [20, 40, 30, 90, 100, 60, 50]}]  
  52.             });  
  53.         });  
  54.     </script>  
  55. </head>  
  56. <body>  
  57.     <form id="form2" runat="server">  
  58.     <div>  
  59.         <div id="container" style="width: 800px; height: 400px; margin: 0 auto">  
  60.         </div>  
  61.     </div>  
  62.     </form>  
  63. </body>  
  64. </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

则样式样式如下：

boshuzhang
关注
HighCharts初学____（1）
咸鱼的星空
12-30 5491
HighCharts初识 1、HighCharts是一款纯Javascript图表库，让开发者很容易在Web网站、Web应用中创建交互性的图表 Highcharts支持目前所有现在浏览器，包括IE6、iPhone/ipad。标准（W3C标准）的浏览器用SVG图形渲染，在遗留的IE浏览器中用VML绘图。 2、 Highcharts官网：http://www.highchart
java highcharts实例_highcharts入门示例demo演示|highchart教程
weixin_34871733的博客
02-16 705
highcharts是一个非常丰富的HTML5图表库，它是用javascript编写的，下面将会用一个highcharts入门示例教程来让各位先入门学习一下highcharts的简单使用。highcharts分为3部分，分别是highcharts，highstock，与highmaps。highcharts：主要用于描绘饼形图，柱形图，折线图等图形。highstock：主要用于描绘股票类的图形。h...
(三)、使用HighCharts创建第一个图表实例
悠然&漫步的专栏
01-28 932
在你的项目中引入上一篇中提到的js文件，项目根目录下新建一个JS文件夹，然后将前面下载的js文件放入该文件夹下，放入后的效果如下：     在前台aspx页面中，引入以上js文件，如下： [c-sharp] view plaincopy "JS/jquery1.5.2.js" mce_src="JS/jquery1.5.
Highcharts柱形范围图使用示例
祈澈菇凉
08-21 465
功能需求：统计三种不同的状态在一天的时间段里面所占的范围   第一步：引入highcharts.js和highcharts-more.js文件 引入文件文件源码：下载https://img.hcharts.cn/highcharts/highcharts-more.js &lt;!-- 引入highcharts.js和highcharts-more.js文件 --&gt; &...
highcharts 图表生成
weixin_30535167的博客
05-17 83
最近在项目中用到了图表插件,用的是highcharts插件中的曲线和饼图代码, 现在总结一下它的使用方法,方便各位少走弯路. 废话不多少,先看第一幅效果图 上幅图中暂时表示了6处地点,我们暂时来解析下这6处地点怎么改 标识 1 图表的标题 标识 2 图表的副标题 标识 3 图表的导出 标识 4 图例说明 标识 5 版权 标识 6...
Highcharts实例
dayang0408的博客
10-10 119
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <html> <head> <title>Highcharts Example</title> <script type="text/...
Javascript highcharts 饼图显示数量和百分比实例代码
10-20
每个数组项代表饼图的一个部分，其中第一个元素是部分名称，第二个元素是该部分的数量。 综上所述，我们了解了如何利用 Highcharts 创建一个显示数量和百分比的饼图，以及如何通过配置项自定义图表的不同部分。这个...
Highcharts(纯JS图表插件)
10-19
创建一个Highcharts图表的第一步是引入相关的JavaScript文件，通常包括`highcharts.js`或其压缩版`highcharts.min.js`。然后，你需要在HTML中定义一个用于展示图表的容器，比如一个`<div>`元素。接着，通过...
网页图表Highcharts实践教程基础篇
09-08
**2.1 第一个实例** 创建一个简单的Highcharts图表涉及以下几个步骤： 1. **引入Highcharts库**：通过`<script>`标签加载Highcharts库。 2. **准备HTML容器**：创建一个`<div>`元素，用于放置图表。 3. **配置图表...
数据呈现&图表插件Highcharts介绍+图表联动案例
Creabine的博客
04-28 5820
由于项目需要，学习并使用了Highcharts图表插件，这是一款功能强大、开源、美观、图表丰富、兼容绝大多数浏览器的纯js图表库插件。 Highcharts简介下边的介绍来自Highcharts中文网 Highcharts是一款纯javascript编写的图表库，能够很简单便捷的在Web网站或Web应用中添加交互性的图表，Highcharts目前支持直线图、曲线图、面积图、柱状图、饼图、散点图等
highcharts示例代码（官方例子）
05-03
highcharts示例代码，用来实现各种图表展现，数据组合快，对应图表种类多。
HighchartsDemo案例
10-19
Highcharts是一个制作图表的纯Javascript类库，主要特性如下： 兼容性：兼容当今所有的浏览器，包括iPhone、IE和火狐等等； 对个人用户完全免费； 纯JS，无BS； 支持大部分的图表类型：直线图，曲线图、区域图、区域曲线图、柱状图、饼装图、散布图； 跨语言：不管是PHP、Asp.net还是Java都可以使用，它只需要三个文件：一个是Highcharts的核心文件highcharts.js，还有a canvas emulator for IE和Jquery类库或者MooTools类库； 提示功能：鼠标移动到图表的某一点上有提示信息； 放大功能：选中图表部分放大，近距离观察图表； 易用性：无需要特殊的开发技能，只需要设置一下选项就可以制作适合自己的图表； 时间轴：可以精确到毫秒；
jquery Highcharts统计图表（实例+源码+中文版API）
05-16
jquery Highcharts统计图表插件，这个是本人自己研究总结的实例+源码，还有中文版的API帮助文档，希望可以帮到大家！
HighCharts 使用案例代码
10-30
最近在做highcharts图标，整理了个Highcharts的使用案例，挺不错的
Highcharts Example
weixin_33894640的博客
05-11 70
2019独角兽企业重金招聘Python工程师标准>>> ...
highcharts详细参数实例非常详细的例子。
weixin_34195364的博客
06-08 205
2019独角兽企业重金招聘Python工程师标准>>> ...
HighCharts操作案例-折线图
刘鹏的技术宅
08-13 4465
<% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> "> My JSP 'TestHighCharts.jsp
【Web】前端Highcharts各种图形 示例
热门推荐
沙师弟专栏
04-03 1万+
最近项目的需要，看了下前端的框架。想要在Web网页上，做折线图，柱形图等。查了一些开源的项目，发现Highcharts框架还是很好用，于是做了一个小示例，供大家共同学习。Highcharts的官网：https://www.highcharts.com/Highcharts的官网的api文档：https://api.hcharts.cn/Highcharts是一个用纯JavaScript编写的一个图表库，能够很简单便捷的在web网站或是web应用程序添加有交互性的图表。
highcharts绘制图表
qq_44963936的博客
01-03 173
highcharts绘制图表支持的图表类型Highcharts 环境配置安装 jQuery功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图...
使用Highcharts创建图表示例
1. 初始化图表：通过`new Highcharts.Chart`创建一个新的图表实例，设置图表的基本属性，如渲染容器、X轴和Y轴的配置、系列数据等。 2. 数据系列：`series`对象定义了图表的数据，可以包含多个数据系列。 3. X轴和Y...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值