Highcharts

最新推荐文章于 2022-11-30 08:28:43 发布

三丶胖子

最新推荐文章于 2022-11-30 08:28:43 发布

阅读量1k

点赞数

分类专栏：工具 web前端文章标签： highcharts js 报表

本文链接：https://blog.csdn.net/xuhf_1988/article/details/9526993

版权

web前端同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

工具

4 篇文章 0 订阅

订阅专栏

在项目中，我们经常需要生成一些图表，更直观的展现我们的数据。

highcharts就是一个很好的js库。

在highcharts的官网中，有很多的demo，使我们更加容易上手。

http://www.highcharts.com/

下面是官网的小demo。

编辑器推荐 Sublime Text

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
		<script type="text/javascript" src="js/highcharts.js"></script>
		<script type="text/javascript">
			$(function(){
				drawLine();
			});

			function drawLine(){
				$('#container').highcharts({
					// 图标类型
					chart: {
					    type: 'line',
					    marginRight: 130,
					    marginBottom: 25
					},
					// 标题
					title: {
					    text: 'Monthly Average Temperature',
					    x: -20 //center
					},
					// 子标题
					subtitle: {
					    text: 'Source: WorldClimate.com',
					    x: -20
					},
					// X轴
					xAxis: {
					    categories: ['1', '2', '3', '4', '5', '6',
					        '7', '8', '9', '10', '11', '12']
					},
					// Y轴
					yAxis: {
					    title: {
					        text: 'Temperature (°C)'
					    },
					    plotLines: [{
					        value: 0,
					        width: 1,
					        color: '#808080'
					    }]
					},
					// 指定鼠标移到上面是label中显示的文字
					tooltip: {
					    //valueSuffix: '鼠标移入label'
					    formatter:function(){
					    	return '<b>'+ this.series.name +'</b><br/>'+
                        			this.x +': '+ this.y +'°C';
					    }
					},
					// 图例
					legend: {
					    layout: 'vertical',
					    align: 'right',
					    verticalAlign: 'top',
					    x: -10,
					    y: 100,
					    borderWidth: 1
					},
					// 用于显示的数据
					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]
					}]
				});
			}
		</script>
	</head>
	<body>
		<div id="container">
		</div>
	</body>
</html>

三丶胖子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Highcharts

在项目中，我们经常需要生成一些图表，更直观的展现我们的数据。highcharts就是一个很好的js库。在highcharts的官网中，有很多的demo，使我们更加容易上手。http://www.highcharts.com/下面是官网的小demo。编辑器推荐 Sublime Text $(function(){ drawLine
复制链接

扫一扫