Highcharts 非常实用的Javascript统计图

Highcharts 官网: http://www.highcharts.com

Highcharts 官网示例:http://www.highcharts.com/demo/

Highcharts 官网文档:http://www.highcharts.com/documentation/how-to-use

官网实例中给出了各式各样的demo,可以参照document修改自己需要的即可。

下面是一个学生成绩走势demo:

Highcharts 非常实用的Javascript统计图_第1张图片

 

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Highcharts Example</title>

		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
		<script type="text/javascript">
	$(function () {
        $('#container').highcharts({
            chart: {
                type: 'spline'
            },
            title: {
                text: '初三第一学期'
            },
            xAxis: {
				
                type: 'datetime',
				labels: {
					formatter: function() {
                        return  Highcharts.dateFormat('%Y-%m-%d', this.value);
					}
                }
            },
            yAxis: {
                title: {
                    text: '分数'
                },
                min: 0
            },
            tooltip: {
				//这种模式下,每点的tooltip单独显示
				shared: false,
                formatter: function() {
						var s = '<b>'+ this.point.name +'</b>'+'<br/>'+  Highcharts.dateFormat("%Y/%m/%d", this.point.x) +': '+this.point.y +'分<br/>';
						return s;
                }
				/**
				这种模式下,两个点的tooltip显示在一起
				shared: true,
				formatter: function() {
						 var s='';
						 $.each(this.points, function(i, point) {
							s += '<b>'+ point.key +'</b>'+'<br/>'+  Highcharts.dateFormat("%Y/%m/%d", point.x) +': '+point.y +'分<br/>';
						});
						return s;
                }
				*/
            },
            series: [{
                name: '英语',
                // Define the data points. All series have a dummy year
                // of 1970/71 in order to be compared on the same x axis. Note
                // that in JavaScript, months start at 0 for January, 1 for February etc.
				
                data: [
                    {x:Date.UTC(1970,  9, 27), y:55, name:'高一第一学期第一次考试'},
                    {x:Date.UTC(1970, 10, 10), y:60, name:'高一第一学期第二次考试'},
                    {x:Date.UTC(1970, 10, 18), y:70, name:'高一第一学期第三次考试'},
                    {x:Date.UTC(1970, 11,  2), y:80, name:'高一第一学期第四次考试'},
                    {x:Date.UTC(1970, 11,  9), y:60, name:'高一第一学期第五次考试'},
                    {x:Date.UTC(1970, 11, 16), y:60, name:'高一第一学期第六次考试'},
                    {x:Date.UTC(1970, 11, 28), y:67, name:'高一第一学期第七次考试'},
                    {x:Date.UTC(1971,  0,  1), y:81, name:'高一第一学期第八次考试'},
                    {x:Date.UTC(1971,  0,  8), y:78, name:'高一第一学期第九次考试'},
                    {x:Date.UTC(1971,  0, 12), y:98, name:'高一第一学期第十次考试'},
                    {x:Date.UTC(1971,  0, 27), y:84, name:'高一第一学期第十一次考试'},
                    {x:Date.UTC(1971,  1, 10), y:80, name:'高一第一学期第十二次考试'},
                    {x:Date.UTC(1971,  1, 18), y:80, name:'高一第一学期第十三次考试'},
                    {x:Date.UTC(1971,  1, 24), y:92, name:'高一第一学期第十四次考试'},
                    {x:Date.UTC(1971,  2,  4), y:49, name:'高一第一学期第十五次考试'},
                    {x:Date.UTC(1971,  2, 11), y:79, name:'高一第一学期第十六次考试'},
                    {x:Date.UTC(1971,  2, 15), y:73, name:'高一第一学期第十七次考试'},
                    {x:Date.UTC(1971,  2, 25), y:61, name:'高一第一学期第十八次考试'},
                    {x:Date.UTC(1971,  3,  2), y:76, name:'高一第一学期第19次考试'},
                    {x:Date.UTC(1971,  3,  6), y:82, name:'高一第一学期第20次考试'},
                    {x:Date.UTC(1971,  3, 13), y:84, name:'高一第一学期第21次考试'},
                    {x:Date.UTC(1971,  4,  3), y:10, name:'高一第一学期第22次考试'},
                    {x:Date.UTC(1971,  4, 26), y:19, name:'高一第一学期第23次考试'},
                    {x:Date.UTC(1971,  5,  9), y:25, name:'高一第一学期第24次考试'},
                    {x:Date.UTC(1971,  5, 12), y:55, name:'高一第一学期第25次考试'}
                ]
				//,type:'column'
            }, {
                name: '数学',
                data: [
                    {'x':Date.UTC(1970,  9, 18), 'y':45, 'name':'高一第一学期第1次考试'},
                    {x:Date.UTC(1970,  9, 27), y:29, name:'高一第一学期第2次考试'},
                    {x:Date.UTC(1970, 11,  1), y:47, name:'高一第一学期第3次考试'},
                    {x:Date.UTC(1970, 11, 11), y:55, name:'高一第一学期第4次考试'},
                    {x:Date.UTC(1970, 11, 25), y:38, name:'高一第一学期第5次考试'},
                    {x:Date.UTC(1971,  0,  8), y:38, name:'高一第一学期第6次考试'},
                    {x:Date.UTC(1971,  0, 15), y:38, name:'高一第一学期第7次考试'},
                    {x:Date.UTC(1971,  1,  1), y:38, name:'高一第一学期第8次考试'},
                    {x:Date.UTC(1971,  1,  8), y:48, name:'高一第一学期第9次考试'},
                    {x:Date.UTC(1971,  1, 21), y:58 ,name:'高一第一学期第10次考试'},
                    {x:Date.UTC(1971,  2, 12), y:89, name:'高一第一学期第11次考试'},
                    {x:Date.UTC(1971,  2, 25), y:70, name:'高一第一学期第12次考试'},
                    {x:Date.UTC(1971,  3,  4), y:94, name:'高一第一学期第13次考试'},
                    {x:Date.UTC(1971,  3,  9), y:91, name:'高一第一学期第14次考试'},
                    {x:Date.UTC(1971,  3, 13), y:75, name:'高一第一学期第15次考试'},
                    {x:Date.UTC(1971,  3, 19), y:66 ,name:'高一第一学期第16次考试'},
                    {x:Date.UTC(1971,  4, 25), y:65 ,name:'高一第一学期第17次考试'},
                    {x:Date.UTC(1971,  4, 31), y:35, name:'高一第一学期第18次考试'},
                    {x:Date.UTC(1971,  5,  7), y:56, name:'高一第一学期第19次考试'} 
                ]
            }, {
                name: '语文',
                data: [
                    {x:Date.UTC(1970,  9,  9), y: 0, name:'高一第一学期第1次考试'},
                    {x:Date.UTC(1970,  9, 14), y:15, name:'高一第一学期第2次考试'},
                    {x:Date.UTC(1970, 10, 28), y:35, name:'高一第一学期第3次考试'},
                    {x:Date.UTC(1970, 11, 12), y:46, name:'高一第一学期第4次考试'},
                    {x:Date.UTC(1971,  0,  1), y:59, name:'高一第一学期第5次考试'},
                    {x:Date.UTC(1971,  0, 24), y:58, name:'高一第一学期第6次考试'},
                    {x:Date.UTC(1971,  1,  1), y:62, name:'高一第一学期第7次考试'},
                    {x:Date.UTC(1971,  1,  7), y:65, name:'高一第一学期第8次考试'},
                    {x:Date.UTC(1971,  1, 23), y:77, name:'高一第一学期第9次考试'},
                    {x:Date.UTC(1971,  2,  8), y:77, name:'高一第一学期第10次考试'},
                    {x:Date.UTC(1971,  2, 14), y:79, name:'高一第一学期第11次考试'},
                    {x:Date.UTC(1971,  2, 24), y:86, name:'高一第一学期第12次考试'},
                    {x:Date.UTC(1971,  3,  4), y:80, name:'高一第一学期第13次考试'},
                    {x:Date.UTC(1971,  3, 18), y:94, name:'高一第一学期第14次考试'},
                    {x:Date.UTC(1971,  3, 24), y:98, name:'高一第一学期第15次考试'},
                    {x:Date.UTC(1971,  4, 16), y:39, name:'高一第一学期第16次考试'},
                    {x:Date.UTC(1971,  4, 21), y: 0, name:'高一第一学期第18次考试'},
                ]
            }]
        });
    });
    

		</script>
	</head>
	<body>
<script src="../../js/highcharts.js"></script>
<script src="../../js/modules/exporting.js"></script>

	<div id="container" style="max-width: 800px; height: 400px; margin: 0 auto"></div>

	</body>
</html>


 

 

你可能感兴趣的:(JavaScript)