jQuery & highcharts

最新推荐文章于 2025-09-09 16:55:30 发布

weixin_34128411

最新推荐文章于 2025-09-09 16:55:30 发布

阅读量89

点赞数

文章标签： javascript ViewUI

本文展示了一个使用jQuery和Highcharts库创建的饼图示例，该图表显示了不同代码问题类型的分布情况。通过允许点选择及鼠标悬停提示等功能增强用户体验。

jQuery, highcharts,

http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js

<script type="text/javascript">
data4 =[[ ' UNREACH.GEN ' , 35.9 ] , [ ' ABR ' , 33.2 ] , [ ' NPD.FUNC.MUST ' , 6.2 ] , [ ' SV.FMT_STR.PRINT_FORMAT_MISMATCH.UNDESIRED ' , 5.1 ] , [ ' UNINIT.STACK.MIGHT ' , 3.1 ] , [ ' NPD.FUNC.MIGHT ' , 2.6 ] , [ ' NPD.CHECK.MIGHT ' , 1.8 ] , [ ' RH.LEAK ' , 1.2 ] , [ ' UNINIT.STACK.MUST ' , 1 ] , [ ' LOCRET.ARG ' , 1 ] , [ ' Others ' , 8.8 ]]

var chart;
$(document).ready(function() {
   chart = new Highcharts.Chart({
      chart: {
         renderTo: 'codespiechart'
      },
      title: {
         text: 'Top 10 Codes'
      },
      plotArea: {
         shadow: null,
         borderWidth: null,
         backgroundColor: null
      },
      tooltip: {
         formatter: function() {
            return '<b>'+ this.point.name +'</b>: '+ this.y +' %';
         }
      },
      plotOptions: {
         pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
            enabled: true,
                color: '#FFFFFF',
                connectorColor: '#BDBDBD',
                formatter: function() {
                    return '<b>'+ this.point.name +'</b>: '+ this.y +' %';
                    }
            }
         }
      },
       series: [{
         type: 'pie',
         name: 'codespiechart',
         data: data4
      }]
   });
});
</script>