您的位置:首页 > 其它

绘制HightCharts饼状图

2014-09-10 14:17 204 查看
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}

]
}]

});
});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: