highcharts学习之第一个例子

最新推荐文章于 2020-01-04 11:11:12 发布

逍遥的流浪

最新推荐文章于 2020-01-04 11:11:12 发布

阅读量510

点赞数

分类专栏：学习笔记

本文链接：https://blog.csdn.net/u010676959/article/details/42775545

版权

学习笔记专栏收录该内容

26 篇文章 0 订阅

订阅专栏

图标显示容器为div 代码如下：

<div id="container" style="min-width:800px;height:400px"></div>

highcharts()方法为highcharts插件的入口调用如下：

$('#container').highcharts({                   //图表展示容器，与div的id保持一致
	        chart: {
	            type: 'column'                         //指定图表的类型，默认是折线图（line）
	        },
	        title: {
	            text: 'My first Highcharts chart'      //指定图表标题
	        },
	        xAxis: {
	            categories: ['my', 'first', 'chart']   //指定x轴分组
	        },
	        yAxis: {
	            title: {
	                text: 'something'                  //指定y轴的标题
	            }
	        },
	        series: [{                                 //指定数据列
	            name: 'Jane',                          //数据列名
	            data: [1, 0, 4]                        //数据
	        }, {
	            name: 'John',
	            data: [5, 7, 3]
	        }]
	    });

以上生成的是条形图。

需要引入两个js 文件

jquery-1.8.3.js

highcharts.js

说明：jquery版本对highcharts的支持 1.4.2 不支持

完整代码：

highchartsdemo1.js

$().ready(function(){

	    $('#container').highcharts({                   //图表展示容器，与div的id保持一致
	        chart: {
	            type: 'column'                         //指定图表的类型，默认是折线图（line）
	        },
	        title: {
	            text: 'My first Highcharts chart'      //指定图表标题
	        },
	        xAxis: {
	            categories: ['my', 'first', 'chart']   //指定x轴分组
	        },
	        yAxis: {
	            title: {
	                text: 'something'                  //指定y轴的标题
	            }
	        },
	        series: [{                                 //指定数据列
	            name: 'Jane',                          //数据列名
	            data: [1, 0, 4]                        //数据
	        }, {
	            name: 'John',
	            data: [5, 7, 3]
	        }, {
	            name: 'tom',
	            data: [2, 1, 8]
	        }]
	    });

	
	
});

highchartsdemo1.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>higcharts1.html</title>


<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript" src="./resources/js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="./resources/js/highcharts.js"></script>

<script type="text/javascript" src="./resources/js/highchartsdemo1.js"></script>
 
</head>

<body>
	This is my HTML page.
	<br>
	<div id="container" style="min-width:800px;height:400px"></div>
</body>
</html>