highcharts入门实例

最新推荐文章于 2020-01-04 11:11:12 发布
最新推荐文章于 2020-01-04 11:11:12 发布
阅读量828 收藏 2
点赞数
分类专栏： Web前端 文章标签： highcharts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/feinifi/article/details/83409958
版权

  highcharts是一个javascript实现的纯web前端的报表框架，目前版本是6.1.4，他可以单独使用，也可以和jquery一起使用，一起使用时，就像使用jquery的一个插件一样，通过$("#id").highcharts(highchart_json)来生成各种报表。
如下是一个折线图，数据含义请忽略：
在这里插入图片描述
实现代码如下：

<!doctype html>
<html>
      <head>
	       <meta charset="UTF-8"/>
		   <title>hightcharts demo</title>
		   <style>
		      *{margin:0;padding:0;}
			  #container{width:800px;margin:100px auto;}
		   </style>
		   <script type="text/javascript" src="js/jquery/jquery-1.12.4.min.js"></script>
		   <script type="text/javascript" src="js/highcharts/highcharts.js"></script>
	  </head>
	  <body>
	      <div id="container"></div>
	  </body>
	  <script type="text/javascript">
	     $(function(){
		    var json = {};
			json.title = {text:"设备日活"};
			json.xAxis={	
				categories:["2018-01",
				"2018-02",
				"2018-03",
				"2018-04",
				"2018-05",
				"2018-06",
				"2018-07",
				"2018-08",
				"2018-09"]
		    };
			json.yAxis={title:{text:'活跃数'},plotLines:[{value:0,width:1,color:'cyan'}]};
			json.tooltip={valueSuffix:'\XB0C'};
			json.legend={layout:'horizontal',
						align:'center',
						verticalAlign:"bottom",
						borderWidth:0};
			json.series = [
					{name:'华为',data:[1023000,
					1036000,
					1041000,
					1082000,
					1093000,
					1064000,
					1045000,
					1026000,
					1027000]},	
					{name:'小米',data:[1003000,
					1036000,
					1040000,
					1650000,
					1060000,
					1070000,
					1028000,
					1029000,
					1020000]},
					{name:'OPPO',data:[1223000,
					1136000,
					1320000,
					1420000,
					1020000,
					1080000,
					1030000,
					1090000,
					1070000]},   
					{name:'VIVO',data:[1123000,
					1136000,
					1220000,
					1520000,
					1320000,
					1420000,
					1520000,
					1620000,
					1420000]},	   
					{name:'联想',data:[923000,
					936000,
					921000,
					922000,
					923000,
					924000,
					925000,
					926000,
					1228000]}];
			$("#container").highcharts(json);
		 });
	  </script>
</html>

构建折现报表几个关键属性：

  • title：报表标题，可以有子标题通过subTitle来定义。
  • xAxis：报表X轴，也就是横轴或水平轴，可以定义X轴的展示数据，以及展示的格式，通过type属性可以指定X轴显示的类型，比如时间type=datetime。有时候一个位置下的文字太多，展示不下，可以通过设置展示角度labels:{rotation:-45}，让文字倾斜。
  • yAxis：报表Y轴，也就是纵轴。
  • legend：图例，通常表示报表中该图例颜色代表的主体。默认是放在报表的下方，居中显示。可以修改显示位置。
  • series：报表的数据，这是最重要的一个地方，报表的灵魂就在这里，数据是数组格式。

标注之后的报表：
在这里插入图片描述

luffy5459
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
java highcharts实例_highcharts入门示例demo演示|highchart教程
weixin_34871733的博客
02-16 698
highcharts是一个非常丰富的HTML5图表库，它是用javascript编写的，下面将会用一个highcharts入门示例教程来让各位先入门学习一下highcharts的简单使用。highcharts分为3部分，分别是highcharts，highstock，与highmaps。highcharts：主要用于描绘饼形图，柱形图，折线图等图形。highstock：主要用于描绘股票类的图形。h...
HighCharts入门
Cherry_Amy的博客
01-04 226
Highcharts摘要 HighCharts是一款纯javascript编写的图表库，是目前最为流行的图表插件,应用范围广泛， 目前支持直线图、曲线图、面积图、曲线面积图、面积范围图、曲线面积范围图、柱状图、柱状范围图、条形图、饼图、散点图、箱线图、气泡图、误差线图、漏斗图、仪表图、瀑布图、雷达图，共18种类型图表。由于其功能强大、简单易用、开源免费等优点，在之前工作技术选型的时候，果断的选择...
HighchartsDemo案例
10-19
Highcharts是一个制作图表的纯Javascript类库，主要特性如下： 兼容性：兼容当今所有的浏览器，包括iPhone、IE和火狐等等； 对个人用户完全免费； 纯JS，无BS； 支持大部分的图表类型：直线图，曲线图、区域图、区域曲线图、柱状图、饼装图、散布图； 跨语言：不管是PHP、Asp.net还是Java都可以使用，它只需要三个文件：一个是Highcharts的核心文件highcharts.js，还有a canvas emulator for IE和Jquery类库或者MooTools类库； 提示功能：鼠标移动到图表的某一点上有提示信息； 放大功能：选中图表部分放大，近距离观察图表； 易用性：无需要特殊的开发技能，只需要设置一下选项就可以制作适合自己的图表； 时间轴：可以精确到毫秒；
Highcharts简单小示例，15秒了解图解
IT_hot_pot的博客
01-04 434
Highcharts 简介 Highcharts 是一个用纯JavaScript编写的一个图表库， 能够很简单便捷的在web 网站或是web应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站 和非商业用途使用。HighCharts支持的图表类型有曲线图、区域图、柱状图、 饼状图、散状点图和综合图表 特点 HighCharts的主要特性包括： 1.兼容性： HighCharts采...
highcharts例子
weixin_30905981的博客
10-10 137
直接看代码 <script language="JavaScript"> $(document).ready(function() { $.ajax({ type:'post', url:'<%=basePath%>charts/getData?type=column', success...
highcharts示例代码（官方例子）
05-03
highcharts示例代码，用来实现各种图表展现，数据组合快，对应图表种类多。
Highcharts实例
dayang0408的博客
10-10 118
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <html> <head> <title>Highcharts Example</title> <script type="text/...
Highcharts入门之简介
10-21
Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。下面通过本文的介绍及实例一起来学习学习吧...
Javascript highcharts 饼图显示数量和百分比实例代码
12-29
Javascript highcharts 饼图显示数量和百分比实例代码  最近公司项目需求有这样一个功能模块，highcharts 饼图显示数量和百分比 ，由于本人刚入门，看到这个需求不会写，于是就上网搜下相关资料，觉得一篇还不错...
highcharts-react:Highcharts官方支持的React包装器
05-04
如何获得图表实例？ 如何添加模块？ 如何将React组件添加到图表元素？ 入门 一般先决条件 确保您的节点， NPM和React是最新的。 经过测试和要求的版本： node 8.11.3+ npm 6.4.1+或类似的软件包管理器 此包装...
highcharts实例demo
06-16
highcharts在项目中的应用，根据年月日周季显示图形，形象的展示数据。http://blog.csdn.net/chenwei7878/article/details/46509881
Highcharts案例.rar
07-13
Highcharts案例介绍 1. 显示一个静态的折线图，要求显示data1.txt文件中的气象数据。 2. 将第一个案例改成直方图，并在每个方块上显示温度值。 3. 在第一个案例中进行修改，不显示版权信息，并将折线图更改为曲线图。 4. 在第三个案例中进行修改，进行辅助线的显示、定制legend(图例)、Tooltip(数据显示框)以及数据输出(中文)。要求当鼠标移动到对应节点的时候，显示辅助线，另外要求分别显示平均最高气温和最低气温的辅助线；要求legend显示在覆盖图表，并显示在左上角；要求数据提示框同时显示最高温度和最低温度&今日平均温度。 a. 显示中文输出 b. 定制legend c. 定制tooltip e. 显示平均温度辅助线(作业：当最高温度不显示的时候，最高平均温度这个辅助线也不显示，同理最低温度一样。) 解决方案：(为了方便操作，可以将legend的属性floating修改为false，然后将最低气温的第一个值改成11，这样方便操作) 公用部分： 使用自定义属性将平均温度辅助线分别添加到对应属性列中(也可以不添加)。 i: 使用chart属性里面的events中的redraw方法，参考属性this.series[i].visible属性，该属性如果为true，表示该数据列显示，如果为false，表示该数据列不显示。然后再分别进行操作。 ii：使用plotOptions中的series的events事件中的hide和show事件，这个就不用参考visible属性。 f. 显示辅助线（x轴上） 5. 显示一个饼图，要求显示data2.txt中的浏览器用户数据。 6. 在第5个案例的基础上，要求点击某个浏览器扇形后，在另外一个容器中显示该浏览器具体的用户使用数据，具体数据在data3.txt中。 7. 显示中国各省份用户ip访问量的展示图，具体数据在data4.txt。
highcharts详细参数实例非常详细的例子。
weixin_34195364的博客
06-08 197
2019独角兽企业重金招聘Python工程师标准>>> ...
highcharts 使用实例
weixin_34252090的博客
10-10 151
后端使用django实现，返回的数据可以修改为从数据库获取或其他方式获取，实例里是写死的数据。 urls配置： url(r'^outip/chart/$', views.charts), url(r'^outip/getchart/$', views.get_chart), url(r'^outip/getlast/$', views.get_last), url(r'^outi...
Highcharts入门+Highcharts基础教程，【非常值得学习的资料】
weixin_34356138的博客
11-16 227
http://www.hcharts.cn/docs/index.php?doc=index Highcharts入门章节目录 Highcharts简介 Highcharts下载与使用 Highcharts配置 Helloworld程序 Highcharts兼容性 Highcharts使用许可 Highcharts基础教程章节目录 Highcharts 主要组成 图...
【Web】前端Highcharts各种图形 示例
热门推荐
沙师弟专栏
04-03 1万+
最近项目的需要，看了下前端的框架。想要在Web网页上，做折线图，柱形图等。查了一些开源的项目，发现Highcharts框架还是很好用，于是做了一个小示例，供大家共同学习。Highcharts的官网：https://www.highcharts.com/Highcharts的官网的api文档：https://api.hcharts.cn/Highcharts是一个用纯JavaScript编写的一个图表库，能够很简单便捷的在web网站或是web应用程序添加有交互性的图表。
一个Highcharts的例子
weixin_30924239的博客
03-17 55
关键字：Highcharts <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Highcharts Example&l...
JavaScript：highcharts示例
qcyfred的博客
06-17 465
highcharts的示例。K线图、line、bar……
HighslideJS作者又一力作—— Highcharts，非常漂亮的JS图表控件
编程手札
09-06 2339
<br /> <br />Highcharts是一个制作图表的纯Javascript类库，主要特性如下：兼容性：兼容当今所有的浏览器，包括iPhone、IE和火狐等等；对个人用户完全免费；纯JS，无BS；支持大部分的图表类型：直线图，曲线图、区域图、区域曲线图、柱状图、饼装图、散布图；跨语言：不管是PHP、Asp.net还是Java都可以使用，它只需要三个文件：一个是Highcharts的核心文件highcharts.js，还有a canvas emulator for IE和Jquery类库或者MooTo
highcharts 销毁实例
最新发布
05-23
销毁 Highcharts 实例可以使用 `destroy()` 方法。该方法会清除所有的事件和 DOM 元素，以及释放内存。你可以这样使用： ```javascript var chart = Highcharts.chart('container', { // 配置选项 }); // 销毁...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

luffy5459

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值