项目收获之highcharts——界面图表showtime

最新推荐文章于 2023-10-16 21:36:09 发布

星辰_mya

最新推荐文章于 2023-10-16 21:36:09 发布

阅读量892

点赞数

分类专栏： -----AuthItem：SSM

本文链接：https://blog.csdn.net/ma15732625261/article/details/60477111

版权

-----AuthItem：SSM 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

最近在做高校的项目，之前的博客也写过一些总结，但是还不是很好，总结也是一种能力，努力ing

进入主题：Highcharts ——用纯JavaScript编写的图表库

what is it ?

一张图胜过千言万语，这些图都是我们hero的功劳，通过Highcharts可以画出下面这些绚丽的图表：3D的哦~~

不是自己做出来的，就不再秀了；不得不说——编程、好厉害啊，膜拜这些大神O(∩_∩)O

所以总的来说：

Highcharts 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表

HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图等等11种图表

HOW：引用、编辑

首先用引用js:Highcharts.js挺好找的，如果找不到的话，喏、链接给你

入门的特别简单，网上也有很多资源，有一些在线的演示，这是一个实例：点击打开链接

敲门砖：栗子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>第一个Highcharts</title>
		<script src="js/jquery.js"></script>
		<script src="js/highcharts.js"></script>
		
	</head>
	<body>
		<!--
        	作者：mxinga@163.com
        	时间：2017-03-09
        	描述：div 用于包含 Highcharts 绘制的图表
        -->
		<div id="container" style="width: 550px; height: 400px; margin: 0 auto;"></div> 
		<script language="JavaScript">
			$(document).ready(function(){
				//为图表配置标题：
				var title={
					text:'月平均气温'
				};
				//为图表配置副标题：
				var subtitle={
					text:'Source: runoob.com'
				};
				var xAxis = {
				       categories: ['一月', '二月', '三月', '四月', '五月', '六月'
				              ,'七月', '八月', '九月', '十月', '十一月', '十二月']
				   };
				var yAxis = {
				      title: {
				         text: 'Temperature (\xB0C)'
				      },
				      plotLines: [{
				         value: 0,
				         width: 1,
				         color: '#808080'
				      }]
				   };

				//配置提示信息：
				var tooltip = {
						  valueSuffix: '\xB0C'
						}
				   //配置图表向右对齐：
				   var legend={
					layout:'vertical',
					align:'right',
					
				};
				//配置图表要展示的数据。每个系列是个数组，每一项在图片中都会生成一条曲线。name 代表数据列的名字，并且会显示在数据提示框（Tooltip）及图例（Legend）中
				var series=[
				{
					name:'Tokyo',
					data:[7.0,6.9,9.5,14.5,18.2,21.5,25.2,26.5,23.3,18.3,13.9,9.6]
				},
				{
					name:'New York',
					data:[-0.2,0.8,5.7,11.4,17.0,22.0,24.8,24.1,20.1,14.1,8.6,2.5]
				},
				{
					name:'Berlin',
					data:[-0.9,0.6,3.5,8.4,13.5,27.0,18.6,17.9,14.3,9.0,3.9,1.0]
				},
				{
					name:'London',
					data:[3.9,4.2,5.7,8.5,11.9,15.3,17.9,16.6,14.3,10.2,6.6,4.8]
				}
			];
			var json={};
			json.title=title;
			json.subtitle=subtitle;
			json.xAxis=xAxis;
			json.yAxis=yAxis;
			json.Tooltip=tooltip;
			json.legend=length;
			json.series=series;
	
			$('#container').highcharts(json);
		});
</script>	
</body>
</html>

名词解释，上张宝图：

这是一个教程，菜鸟教程写的就已经很棒了

总结：

发现了好玩的东西，这个够炫、希望学习的过程中不要遇到太多的bug，不能这么说，问题使me成长，I love trouble ，No i don't.Thank for your time.

参考：

https://www.hcharts.cn/docs/basic-compose

http://www.runoob.com/highcharts/highcharts-configuration-syntax.html

星辰_mya

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
13
评论
项目收获之highcharts——界面图表showtime

Highcharts ——用纯JavaScript编写的图表库,c#一行行代码简简单单就可以画出绚丽的图表，甚至是3D的（3D的当然不简单了），带你入门，一起见证这个好玩的东西，闪亮一下
复制链接

扫一扫

专栏目录