欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Highcharts 圆饼图demo 博客分类: javascript Highcharts圆饼图 

程序员文章站 2024-03-14 22:30:59
...

Highcharts 圆饼图demo
            
    
    博客分类: javascript Highcharts圆饼图 

<div id="container" style="width: 600px; height: 550px; margin: 0 auto"></div>
<script language="JavaScript">
    var beginTime = "2016年12月06日 16:54";
    var endTime = "2017年01月06日 16:54";
    $(document).ready(function() {
        var chart = {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        };
        var title = {
            text: beginTime+' ~  '+endTime
        };
        //鼠标显示
        var tooltip = {
            pointFormat: '{series.name}: <b>{point.y}</b><br/>总调用次数:{point.total}'
        };
        //饼图外显示
        var plotOptions = {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    format: '<b>{point.name}</b>: {point.percentage:.1f}%'
                },
                showInLegend: true
            }
        };
        var series= [{
            type: 'pie',
            name: '调用次数',
            data: [
                {
                    name: "逾期平台查询",
                    y: 100
                },
                {
                    name: "人脸比对",
                    y: 20
                },
                {
                    name: "银行帐号认证",
                    y: 300
                },
                {
                    name: "法院公告详情",
                    y: 4
                },
                {
                    name: "名片识别",
                    y: 50
                },
                {
                    name: "营业执照识别",
                    y: 6
                }
            ]
        }];

        var json = {};
        json.chart = chart;
        json.title = title;
        json.tooltip = tooltip;
        json.series = series;
        json.plotOptions = plotOptions;
        $('#container').highcharts(json);
    });
</script>
  • Highcharts 圆饼图demo
            
    
    博客分类: javascript Highcharts圆饼图 
  • 大小: 171.4 KB