highcharts.js ,可以在网页中绘制表的 js 类库。相对于其他 使用 canvas，highcharts.js 使用 svg绘制图表在兼容性上更有优势。
highcharts.js 还提供了图表下载功能。
highcharts.js 的 api文档很完善(中文), 怎么使用不加赘述。
绘制饼状图（来源于官方实例，增加了一行去右下角水印的配置）
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <title>htghcharts饼状图</title>
7 <script type="text/javascript" src="jQuery.min.js"></script>
8 </head>
9
10 <body>
11 <script type="text/javascript">
12 $(document).ready(function() {
13 $(‘#container‘).highcharts({
14 chart: {
15 plotBackgroundColor: null,
16 plotBorderWidth: null,
17 plotShadow: false,
18 type: ‘pie‘
19 },
20 title: {
21 text: ‘浏览器品牌使用百分比‘
22 },
23 tooltip: {
24 pointFormat: ‘{series.name}: <b>{point.percentage:.1f}%</b>‘
25 },
26 plotOptions: {
27 pie: {
28 allowPointSelect: true,
29 cursor: ‘pointer‘,
30 dataLabels: {
31 enabled: false
32 },
33 showInLegend: true
34 }
35 },
36 credits: {
37 enabled: false /*配置不输出右下角水印*/
38 },
39 series: [{
40 name: ‘品牌‘,
41 colorByPoint: true,
42 data: [{
43 name: ‘IE‘,
44 y: 56.33
45 }, {
46 name: ‘Chrome‘,
47 y: 24.03,
48 sliced: true,
49 selected: true
50 }, {
51 name: ‘Firefox‘,
52 y: 10.38
53 }, {
54 name: ‘Safari‘,
55 y: 4.77
56 }, {
57 name: ‘Opera‘,
58 y: 0.91
59 }, {
60 name: ‘Proprietary or Undetectable‘,
61 y: 0.2
62 }]
63 }]
64 });
65 });
66 </script>
67 <script src="highcharts.js"></script>
68 <!--提供下载服务，官方后端服务，可以配置到自己的服务器-->
69 <script src="exporting.js"></script>
70 <div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
71 </body>
72
73 </html>
时间： 2024-10-18 12:10:20