简介：

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

HighCharts 界面美观，由于使用JavaScript编写，所以不需要像Flash和Java那样需要插件才可以运行，而且运行速度快。另外HighCharts还有很好的兼容性，能够完美支持当前大多数浏览器。现在官方的最新版本为Highcharts-4.2.3。

特点：

HighCharts的主要特性包括：

1.兼容性：HighCharts采用纯JavaScript编写，兼容当今大部分的浏览器，包括Safari、IE和火狐等等；

2.图表类型：HighCharts支持图表类型，包括曲线图、区域图、柱状图、饼状图、散状点图和综合图表等等，可以满足各种需求。

3.不受语言约束：HighCharts可以在大多数的WEB开发中使用，并且对个人用户免费，支持ASP，PHP，JAVA，.NET等多种语言中使用。

4.提示功能：HighCharts生成的图表中，可以设置在数据点上显示提示效果，即将鼠标移动到某个数据点上，可以显示该点的详细数据，并且可以对显示效果进行设置。

5.放大功能：HighCharts可以大量数据集中显示，并且可以放大某一部分的图形，将图表的精度增大，进行详细的显示，可以选择横向或者纵向放大。

6.时间轴：可以精确到毫秒。

7.导出：表格可导出为 PDF/ PNG/ JPG / SVG 格式

8.输出：网页输出图表。

9.可变焦：选中图表部分放大，近距离观察图表；

10.外部数据：从服务器载入动态数据。

11.文字旋转：支持在任意方向的标签旋转。

优点：

主题多
动态交互不错
操作简单

案例：

结构：

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Highcharts Test</title>
		<!--<style type="text/css">
			$ {demo.css}
		</style>-->
		<!-- 引入Js -->
		<script type="text/javascript" src="js/jquery-3.1.0.js"></script>
		<script type="text/javascript" src="js/highcharts/highcharts.js"></script>
		<!--<script type="text/javascript" src="js/highcharts/exporting.js"></script>-->
		<script type="text/javascript">
			$(function() {
				$('#container').highcharts({
					chart: {
						plotBackgroundColor: null,
						plotBorderWidth: null,
						plotShadow: false,
						type: 'pie'
					},
					title: {
						text: 'Highcharts 饼状图 Demo !'
					},
					tooltip: {
						pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
					},
					plotOptions: {
						pie: {
							allowPointSelect: true,
							cursor: 'pointer',
							dataLabels: {
								enabled: false
							},
							// 显示图例
							showInLegend: true
						}
					},
					legend: {	// 图例显示位置
						layout: 'vertical',
						align: 'left',
						verticalAlign: 'top',
						x: 20,
						y: 20,
						floating: true,
						backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || 'transparent'
					},
					credits: {	// 右下角水印
						enabled: true,
						text: 'By - 吥悔',
						href: 'http://www.javazlm.com'
					},
					series: [{
						name: 'Brands',
						colorByPoint: true,
						data: [{
							name: 'Microsoft Internet Explorer',
							y: 56.33
						}, {
							name: 'Chrome',
							y: 24.03,
							sliced: true,
							selected: true
						}, {
							name: 'Firefox',
							y: 10.38
						}, {
							name: 'Safari',
							y: 4.77
						}, {
							name: 'Opera',
							y: 0.91
						}, {
							name: 'Proprietary or Undetectable',
							y: 0.2
						}]
					}]
				});
			});
		</script>
	</head>

	<body>
		<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
	</body>
</html>

[Highcharts] 初识Highcharts 饼状图示例

简介：

特点：

优点：

案例：

结构：

实例：

案例展示：

猜你喜欢