highcharts

最新推荐文章于 2023-03-15 21:28:36 发布

langao_

最新推荐文章于 2023-03-15 21:28:36 发布

阅读量177

点赞数

分类专栏： java

本文链接：https://blog.csdn.net/langao_q/article/details/83514420

版权

java 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

1.highcharts简介

Highcharts 是一个用纯JavaScript编写的一个图表库，能够很简单便捷的在web网站或是web应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表。

基于jQuery开发一个图形报表工具插件

官网：http://www.hcharts.cn/

2>基本组成

2.搭建highcharts基本案例

1>导入相关资源：在web项目的js文件夹下导入highcharts压缩包下js的所有文件

2>引入相关js文件

<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script>
<script src="${pageContext.request.contextPath }/js/highcharts/highcharts.js"></script>
<script src="${pageContext.request.contextPath }/js/highcharts/modules/exporting.js"></script>

3>在页面中提供一个div，并指定id（highcharts的图形都是在一个div中）

<body>
	<div id="test"></div>
</body>

4>调用Highcharts提供的方法，动态创建图表

<script type="text/javascript">
	$(function(){
		//页面加载完成后，动态创建图表
		$("#test").highcharts({
			title: {
	            text: '各浏览器份额'
	        },
	        series: [{
	            type: 'pie',
	            name: '浏览器占比',
	            data: [
	                ['Firefox',   45.0],
	                ['IE',       26.8],
	                ['Safari',    8.5],
	                ['Opera',     6.2],
	                ['Others',   0.7]
	            ]
	        }]
		});
	});
</script>

3.一些常用图形

饼状图：

$(function () {
    $('#container').highcharts({
        title: {
            text: '各浏览器份额'
        },
        series: [{
            type: 'pie',
            name: '浏览器占比',
            data: [
                ['Firefox',   45.0],
                ['IE',       26.8],
                ['Safari',    8.5],
                ['Opera',     6.2],
                ['Others',   0.7]
            ]
        }]
    });
});

柱状图：

$(function () {
    $('#container').highcharts({
        title: {
            text: '水果销量'
        },
        subtitle:{text:'------传智播客统计'},
        xAxis: {
            categories: ['苹果', ' 橙', '梨', '香蕉', '李']
        },
        series: [{
            type: 'column',
            name: 'Jane',
            data: [3, 2, 1, 3, 4]
        }, {
            type: 'column',
            name: 'John',
            data: [2, 3, 5, 7, 6]
        }, {
            type: 'column',
            name: 'Joe',
            data: [4, 3, 3, 9, 0]
        }]
    });
});