Highcharts 是一个用纯JavaScript编写的一个图表库。

Highcharts 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表

Highcharts 免费提供给个人学习、个人网站和非商业用途使用。

Highcharts 基本饼图 语法

HighCharts 特性

兼容性 - 支持所有主流浏览器和移动平台（android、iOS等）。

多设备 - 支持多种设备，如手持设备 iPhone/iPad、平板等。

免费使用 - 开源免费。

轻量 - highcharts.js 内核库大小只有 35KB 左右。

配置简单 - 使用 json 格式配置

动态 - 可以在图表生成后修改。

多维 - 支持多维图表

配置提示工具 - 鼠标移动到图表的某一点上有提示信息。

时间轴 - 可以精确到毫秒。

导出 - 表格可导出为 PDF/ PNG/ JPG / SVG 格式

输出 - 网页输出图表。

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

外部数据 - 从服务器载入动态数据。

文字旋转 - 支持在任意方向的标签旋转。

Highcharts 基本饼图 示例

<html>
<head>
<meta charset="UTF-8" />
<title>Highcharts 教程 | php.cn</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
$(document).ready(function() {  
   var chart = {
       plotBackgroundColor: null,
       plotBorderWidth: null,
       plotShadow: false
   };
   var title = {
      text: '2014 年各浏览器市场占有比例'   
   };      
   var tooltip = {
      pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
   };
   var plotOptions = {
      pie: {
         allowPointSelect: true,
         cursor: 'pointer',
         dataLabels: {
            enabled: true,
            format: '<b>{point.name}%</b>: {point.percentage:.1f} %',
            style: {
               color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
            }
         }
      }
   };
   var series= [{
      type: 'pie',
      name: 'Browser share',
      data: [
         ['Firefox',   45.0],
         ['IE',       26.8],
         {
            name: 'Chrome',
            y: 12.8,
            sliced: true,
            selected: true
         },
         ['Safari',    8.5],
         ['Opera',     6.2],
         ['Others',   0.7]
      ]
   }];     
      
   var json = {};   
   json.chart = chart; 
   json.title = title;     
   json.tooltip = tooltip;  
   json.series = series;
   json.plotOptions = plotOptions;
   $('#container').highcharts(json);  
});
</script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例