Highcharts

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

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
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值