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
                        }
                    ]
                }]
            });
        });
    
    });
  • 相关阅读:
    快速幂取模算法详解
    牛客网小白月赛5I区间(差分数组)
    多重背包模板
    hdu5791(DP)
    CodeForces
    最长上升子序列LIS(51nod1134)
    POJ1088(记忆搜索加dp)
    最长公共子序列LCS(POJ1458)
    Gym 100971J-Robots at Warehouse
    模板
  • 原文地址:https://www.cnblogs.com/linsu/p/4717732.html
Copyright © 2011-2022 走看看