利用highcharts.js画圆饼

最新推荐文章于 2020-04-10 11:03:43 发布

dishang1614

最新推荐文章于 2020-04-10 11:03:43 发布

阅读量114

点赞数

文章标签： json javascript ViewUI

原文链接：http://www.cnblogs.com/lingdu87/p/7985439.html

版权

最近需要项目需要画图表，在网上搜索N多方法，最后选择用highcharts.js；

具体实例如下：

html部分

<body>
<div id="container" style="width: 250px; height: 250px; margin: 0 auto"></div>
</body>
Script部分
首先引入jquery.js,然后再引入highcharts.js

<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/highcharts.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        var chart = {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        };
        var title = {
            text: '圆饼图例'
        };
        var tooltip = {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        };
        var plotOptions = {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: false
                },
                showInLegend: true
            }
        };
        var series= [{
            type: 'pie',
            name: '占百分比',
            data: [
                ['火狐',   45.0],
                ['IE',       26.8],
                {
                    name: '谷歌',
                    y: 12.8,
                    sliced: true,
                    selected: true
                },
                ['苹果',    8.5],
                ['欧朋',     6.2],
                ['其他',   0.7]
            ]
        }];

        var json = {};
        json.chart = chart;
        json.title = title;
        json.tooltip = tooltip;
        json.series = series;
        json.plotOptions = plotOptions;
        $('#container').highcharts(json);
　　　　 $('#container .highcharts-container svg').children(':last').text('');//去除底部链接
    });
</script>

效果如下图：

转载于:https://www.cnblogs.com/lingdu87/p/7985439.html

dishang1614

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
利用highcharts.js画圆饼

最近需要项目需要画图表，在网上搜索N多方法，最后选择用highcharts.js；具体实例如下：html部分<body><div id="container" style="width: 250px; height: 250px; margin: 0 auto"></div></body>Script部分首先引入jquery.j...
复制链接

扫一扫