zoukankan      html  css  js  c++  java
  • 绘制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} 
     
                   ]  
               }] 
    
    
            });
        });    
  • 相关阅读:
    CSS
    javaScript的DOM操作
    模板Template
    Django的View(视图)
    路由系统(urls.py)
    MTV和MVC模型和创建Django项目
    rest-framework认证组件
    property classmethod staticmethod和反射
    ModelSerializer和视图
    rest-framework序列化
  • 原文地址:https://www.cnblogs.com/blog4xy/p/3964348.html
Copyright © 2011-2022 走看看