1、简介

最近项目的需要，看了下前端的框架。想要在Web网页上，做折线图，柱形图等。查了一些开源的项目，发现Highcharts框架还是很好用，于是做了一个小示例，供大家共同学习。

Highcharts的官网：https://www.highcharts.com/
Highcharts的官网的api文档：https://api.hcharts.cn/
Highcharts是一个用纯JavaScript编写的一个图表库，能够很简单便捷的在web网站或是web应用程序添加有交互性的图表。

2、折线图——效果图

做了一个简单的折线图的示例：

3、折线图——示例代码

<!DOCTYPE HTML>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Highcharts小示例--沙师弟专栏</title><style type="text/css"></style></head><body><script src="js/jquery-3.1.1.min.js"></script><script src="js/highcharts.js"></script><script src="js/exporting.js"></script><div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div><script type="text/javascript">$(document).ready(function() {var legend = { layout: 'vertical', align: 'right', verticalAlign: 'middle', borderWidth: 0 };var title = { text: '用户量基本情况' };var subtitle = { text: 'Basic Situation of Outbound Call User Volume' };var tooltip = { valueSuffix: '个' };var yAxis = { title: { text: '用户量' }, plotLines: [{ value: 0, width: 1, color: '#808080' }] };var xAxis = { categories: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00','10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00']};var series =  [{name: '德邦',data: [0,0,0,0,0,45,1,3,6,1,3,5,1,45,4,6,76,1,3,5,7,7,12,4]},{name: '华润',data: [0,0,0,0,0,4,13,31,63,12,33,45,11,4,4,46,6,31,31,0,0,0,0,0]},{name: '电信',data: [10,20,40,20,10,6,3,3,6,102,133,145,211,124,214,146,26,31,31,10,20,10,30,40]},]; var chart = {};var json = {};json.title = title;json.subtitle = subtitle;json.xAxis = xAxis;json.yAxis = yAxis;json.tooltip = tooltip;json.legend = legend; json.chart = chart;json.series = series;$('#container').highcharts(json);});</script></body>
</html>

4、柱形图——效果图

5、柱形图——示例代码

变成柱形图的代码非常简单，只需要修改它的chart属性type为column值即可。

6、面积图——效果图

7、面积图——示例代码

和柱形图的代码差不多，面积图需要修改它的chart属性type为area值即可。

8、其它的各种图

可参考官网：https://www.highcharts.com.cn/demo/highcharts/bubble-3d

可参考官网：https://www.highcharts.com.cn/demo/highcharts/scatter-boost

9、注：隐藏Highcharts.com图标

默认的Highcharts是会显示图标的，而且图标可以链接到它的官网上，我们需要隐藏掉图标：

前端学习之 Highcharts各种图形示例相关推荐

前端学习（HTML5）
前端学习之HTML5 一.HTML5介绍二.HTML5修改和新增的内容 html声明 html指定字符编码 html5新增的标签 1.结构语义化标签 2.表单控制标签 3.其他标签的应用(多媒体.w ...
前端学习2——CSS3
前端学习2--CSS3 0.css注释 /* 这是一条注释 */ 1.样式优先级行内样式>内部样式>外部样式 1.1.行内样式 <p style="font-size:1 ...
Web前端学习书籍推荐
今天小编要跟大家分享的文章是关于Web前端工程师应该读的前端书籍推荐.正在从事web前端工作的小伙伴们都知道,想要从事前端行业,要学习的内容太多了,当你不知道从哪里开始的时候,你就先从看书开始,边看书 ...
入门前端学习路线图【送书】
大家好,我是若川.记得点上方音频听小姐姐配音,超级好听. 华章图书又赞助了书籍送福利给大家.本次送4本书的抽奖方式是:截止到9月6日(周一)20:00,在留言区留言任意内容.我会在留言区抽取「1位」关 ...
web前端学习之HTML
html标记语言是网页自动化测试所必须要掌握的,可以说是前端学习的基石,我都是在w3school上学的,所以就以此来讲.学习地址:http://www.w3school.com.cn/ HTML 指的 ...
一个声称南方985普通学生，前端学习10个月，秋招斩获字节跳动offer的分享！
0. 我的秋招经历题主基本情况,南方普通985普通学生,接触前端十个月左右,今年 8 月后开始正式准备秋招. 说起我的秋招,一个词,就是"逆袭".一开始,华为笔试没过,三七互娱笔 ...
sql子查询示例_学习SQL：SQL查询示例
sql子查询示例 In the previous article we've practiced SQL, and today, we'll continue with a few more SQL ...
Web前端学习——HTML
Web前端学习day1 一.html的基本介绍 html基本框架二.html元素 1.标题标签 2.水平线标签 3.段落标签 4.强制换行标签 5.文本格式化标签 6.超链接标签 7.图片标签 8. ...
web前端学习路线-20个真实web开发项目集合
目前web前端工程师日均岗位缺口已经超过50000,随着互联网+的深入发展,html5作为前端展示技术,市场人才需求量将呈直线上涨. Web前端工程师的岗位职责是利用HTML.CSS.Java.DOM ...
web前端学习路线（含20个真实web开发项目集合）
目前web前端工程师日均岗位缺口已经超过50000,随着互联网+的深入发展,html5作为前端展示技术,市场人才需求量将呈直线上涨. Web前端工程师的岗位职责是利用HTML.CSS.Java.DOM ...

前端学习之 Highcharts各种图形示例

文章目录

1、简介

2、折线图——效果图

3、折线图——示例代码

4、柱形图——效果图

5、柱形图——示例代码

6、面积图——效果图

7、面积图——示例代码

8、其它的各种图

9、注：隐藏Highcharts.com图标

前端学习之 Highcharts各种图形示例相关推荐

最新文章

热门文章

前端学习 之 Highcharts各种图形 示例

文章目录

1、简介

2、折线图——效果图

3、折线图——示例代码

4、柱形图——效果图

5、柱形图——示例代码

6、面积图——效果图

7、面积图——示例代码

8、其它的各种图

9、注：隐藏Highcharts.com图标

前端学习 之 Highcharts各种图形 示例相关推荐

最新文章

热门文章

前端学习之 Highcharts各种图形示例

前端学习之 Highcharts各种图形示例相关推荐