码迷,mamicode.com
首页 > 其他好文 > 详细

绘制HightCharts饼状图

时间:2014-09-10 15:38:30      阅读:138      评论:0      收藏:0      [点我收藏+]

标签:style   blog   color   os   io   ar   for   art   div   

1.添加引用highcharts.js和exporting.js

2.前台代码如下,相关参数可以从后台配置,支持load加载

    $(function () {
        $(‘#ResInfoView‘).highcharts({                   //图表展示容器,与div的id保持一致
            chart: {
                type: ‘pie‘                         //指定图表的类型,默认是折线图(line)
            },
            title: {
                text: ‘资源总容量$!totalSize‘      //指定图表标题
            },
           tooltip: {  
           //2表示精确到小数点后2位
                       formatter: function () {  
                           return ‘<b>‘ + this.point.name + ‘</b>: ‘ + Highcharts.numberFormat(this.percentage, 2) + ‘ %‘;  
                       }  
                   },

             series: [{//设置每小个饼图的颜色、名称、百分比  
               type: ‘pie‘,  
               name: null,  
               data: [  
                    {name:‘图片$!PicSize‘,color:‘#3DA9FF‘,y:$!PicRate},
                    { name: ‘文档$!DocSize‘, color: ‘#008FE0‘, y: $!DocRate },
                    { name: ‘视频$!VideoSize‘, color: ‘#00639B‘, y: $!VideoRate },  
                    {name:‘其他$!OtherSize‘,color:‘#CBECFF‘,y:$!OtherRate} 
 
               ]  
           }] 


        });
    });    

 

绘制HightCharts饼状图

标签:style   blog   color   os   io   ar   for   art   div   

原文地址:http://www.cnblogs.com/blog4xy/p/3964348.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!