Highcharts 半圈圆环图

最新推荐文章于 2025-05-14 17:04:14 发布

原创最新推荐文章于 2025-05-14 17:04:14 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Highcharts

Highcharts 专栏收录该内容

58 篇文章

订阅专栏

本文介绍如何使用Highcharts库创建一个半圈的圆环图，展示浏览器市场份额的数据。通过HTML、JavaScript和Highcharts配置，实现了独特的图表样式，包括自定义开始和结束角度、数据标签样式等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一代码

<html>
<head>
<meta charset="UTF-8" />
<title>Highcharts 半圈圆环图</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://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: 0,
       plotShadow: false
   };
   // 标题
   var title = {
      text: '浏览器份额',
      align: 'center',
      verticalAlign: 'middle',
      y: 50
   };
   // 提示
   var tooltip = {
      pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
   };
   var plotOptions = {
      pie: {
         dataLabels: {
            enabled: true,
            distance: -50,
            style: {
               fontWeight: 'bold',
               color: 'white',
               textShadow: '0px 1px 2px black'
            }
         },
         startAngle: -90,   //开始角度
         endAngle: 90,      //结束角度
         center: ['50%', '75%']
      }
   };
   var series= [{
      //饼图
      type: 'pie',
      name: 'Browser share',
      // 控制环的尺寸
      innerSize: '50%',
      // 数据
      data: [
         ['Firefox',   45.0],
         ['IE',       26.8],
         ['Chrome', 12.8],
         ['Safari',    8.5],
         ['Opera',     6.2],
         {
            name: 'Others',
            y: 0.7,
            dataLabels: {
               enabled: false
            }
         }
      ]
   }];

   var json = {};
   json.chart = chart;
   json.title = title;
   json.tooltip = tooltip;
   json.series = series;
   json.plotOptions = plotOptions;
   $('#container').highcharts(json);
});
</script>
</body>
</html>

二运行结果