zoukankan      html  css  js  c++  java
  • Highcharts 饼图数值显示在图形上

    1.引用js文件

    <script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.2.min.js"></script>

    <script src="/global/plugins/highcharts/highcharts.js" type="text/javascript"></script>
    <script src="/global/plugins/highcharts/highcharts-3d.js" type="text/javascript"></script>
    <!-- <script src="/global/plugins/highcharts/themes/grid.js" type="text/javascript"></script>-->
    <script src="/global/plugins/highcharts/modules/exporting.js" type="text/javascript"></script>

    2.主体部分

    <div id="container" style="min-400px;height:400px"></div>

    $(function () {
    
        $(document).ready(function () {
    
            // Build the chart
            $('#container').highcharts({
                chart: {
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: true
                },
                title: {
                    text: '数值显示在图形区域'
                },
                tooltip: {
                    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: true,
                            distance: -30,
                            format:'<b>{point.y}</b>',
                           
                        },
                        showInLegend: true
                    
                    }
                },
                 legend: {
                        layout: 'vertical',
                        align: 'right',
                        verticalAlign: 'middle',
                        borderWidth: 0
                    },
                series: [{
                    type: 'pie',
                    name: '占比',
                    distance: -10,
                    data: [
                        ['Firefox',   45.0],
                        ['IE',       26.8],
                        {
                            name: 'Chrome',
                            y: 12.8,
                            sliced: true,
                            selected: true
                        }
                    ]
                }]
            });
        });
    
    });
  • 相关阅读:
    浴谷夏令营2017.8.1数论的整理
    BZOJ1483: [HNOI2009]梦幻布丁
    NOIP2014-11-3模拟赛
    BZOJ3884: 上帝与集合的正确用法
    BZOJ4869: [Shoi2017]相逢是问候
    计蒜客NOIP2017提高组模拟赛(三)day1
    NOIP2014-9-6模拟赛
    NOIP2014-7-7模拟赛
    zoj Little Keng(快速幂)
    多校Key Set (快速幂)
  • 原文地址:https://www.cnblogs.com/linsu/p/4717732.html
Copyright © 2011-2022 走看看