在项目中,我们经常需要生成一些图表,更直观的展现我们的数据。
highcharts就是一个很好的js库。
在highcharts的官网中,有很多的demo,使我们更加容易上手。
下面是官网的小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>