首页 > 代码库 > 绘制HightCharts饼状图

绘制HightCharts饼状图

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饼状图