highcharts实现的饼状图代码实例

最新推荐文章于 2025-09-12 08:29:20 发布

翻译最新推荐文章于 2025-09-12 08:29:20 发布 · 671 阅读

图表专栏收录该内容

3 篇文章

订阅专栏

本文提供了一个使用Highcharts库绘制饼状图的具体代码示例。该图表展示了不同浏览器市场份额的比例分布，通过配置项实现了饼图的样式调整、数据标签显示及鼠标悬停提示等功能。

分享一段代码实例，它演示了使用highcharts绘制饼状图效果。

代码实例如下:

 
             <!doctype html>
            
             <
             html
             >
            
             <
             head
             >
            
             <
             meta 
             charset
             =
             "utf-8"
             >
            
             <
             title
             >饼状图</
             title
             >
            
             <
             script 
             src
             =
             'http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js'
             ></
             script
             >
            
             <
             script 
             src
             =
             'http://cdn.hcharts.cn/highcharts/highcharts.js'
             ></
             script
             >
            
             <
             script
             >
            
             $(function() {
            
             $('#container').highcharts({
            
             chart: {
            
             plotBackgroundColor: null,
            
             plotBorderWidth: null,
            
             plotShadow: false
            
             },
            
             title: {
            
             text: '你好'
            
             },
            
             tooltip: {
            
             pointFormat: '{series.name}: <
             b
             >{point.percentage:.1f}%</
             b
             >'
            
             },
            
             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'
            
             }
            
             }
            
             }
            
             },
            
             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]
            
             ]
            
             }]
            
             });
            
             });
            
             </
             script
             >
            
             </
             head
             >
            
             <
             body
             >
            
             <
             div 
             id
             =
             "container" 
             style
             =
             "min-width:800px;height:400px;"
             ></
             div
             >
            
             </
             body
             >
            
             </
             html
             >