highcharts实现的饼状图代码实例

最新推荐文章于 2022-05-29 19:13:51 发布

Return_KB

最新推荐文章于 2022-05-29 19:13:51 发布

阅读量583

点赞数

分类专栏：图表

图表专栏收录该内容

3 篇文章 0 订阅

订阅专栏

分享一段代码实例，它演示了使用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 
             >