绘制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} 

               ]
           }] 

        });
    });    
时间: 2024-10-10 19:11:40

绘制HightCharts饼状图的相关文章

用canvas绘制的饼状图,6等分,颜色随机

都说程序员懒,生活还是不能懒的,比如洗头.洗脸,当然也包括是分享咯.下面分享一下我用H5的新标签canvas绘制的饼状图,颜色是随机生成的,动态生成6等分,我还做了随机生成数据的, 配上文字,每份所占的比例就显而意见.,这点用在分析数据还是挺好的.图片如下; canvas 是 HTML5 提供的一个用于展示绘图效果的标签. canvas 原意画布, 帆布. 在 HTML 页面中用于展示绘图效果. 最早 canvas 是苹果提出的一个方案, 今天已经在大多数浏览器中实现.. 基本使用语法: 使用

绘制matplotlib 饼状图

参考:https://blog.csdn.net/ScarlettYellow/article/details/80458797 (2)2016年就业人员在三次产业中分布的饼状图. def swap(list): date = [] name = [] for i in range(0,len(list)): date.append(list[i][1]) name.append(list[i][0]) return date, name def fun2(): # 构造数据 industry3

JavaScript+svg绘制的一个饼状图

svg参考:https://www.w3.org/TR/SVG/ <body onload='document.body.appendChild( pieChart([12,23,34,45],640,400,200,200,150, ["red","blue","yellow","green"], ["North","South","East","W

【应用】SVG饼状图

<!DOCTYPE html> <html> <head> <title></title> </head> <body onload="document.body.appendChild( pieChart([12,23,34,45],640,400,200,200,150, ['red','blue','yellow','green'], ['North','South','East','West'],400,100

D3.js的v5版本入门教程(第十三章)—— 饼状图

D3.js的v5版本入门教程(第十三章) 这一章我们来绘制一个简单的饼状图,我们只绘制构成饼状图基本的元素——扇形.文字,从这一章开始,内容可能有点难理解,因为每一章都会引入比较多的难理解知识点,在这里作者本人也只是粗略的讲解每个新知识点的意思!如果不是很理解的话,需要读者自行查看官网API 为了绘制一个饼状图,我们还是需要以下新的知识点 d3.arc( {} ),弧形生成器,用以绘制弧形,需要传入一些用以绘制弧形基本的数据的对象,例如,该对象的属性可以包括(我用官网api的示例) d3.pie

iOS:使用贝塞尔曲线绘制图表(折线图、柱状图、饼状图)

1.介绍: UIBezierPath :画贝塞尔曲线的path类 UIBezierPath定义 : 贝赛尔曲线的每一个顶点都有两个控制点,用于控制在该顶点两侧的曲线的弧度. 曲线的定义有四个点:起始点.终止点(也称锚点)以及两个相互分离的中间点. 滑动两个中间点,贝塞尔曲线的形状会发生变化. UIBezierPath :对象是CGPathRef数据类型的封装,可以方便的让我们画出 矩形 . 椭圆 或者 直线和曲线的组合形状 初始化方法: + (instancetype)bezierPath; /

在Unity中使用uGUI绘制自定义图形(饼状图 雷达图)

饼状图或者是雷达图是根据属性自动生成的自定义图形.这里展示了如何使用uGUI完成这一功能. 先附上我制作雷达图的控件的代码  UIPropWidget.cs using UnityEngine; using System.Collections.Generic; using UnityEngine.UI; /* * * 2 6 * * 3 7 * * 0 1 5 4 * * * 2 6位为属性0 3为属性1 0为属性2 4为属性3 7为属性4 */ public class UIPropWidg

Android例子源码动态绘制折线、圆柱、饼状图

Android例子源码动态绘制折线.圆柱.饼状图 仿天气类app绘制饼状图.折线图.柱状图的实现效果,效果挺不错,例子没有使用第三方类库,全部都是使用Canvas实现.需要的朋友可以自己下载研究下. 下载地址:http://www.devstore.cn/code/info/999.html 运行截图:   

C# 绘制图表(柱状图,线性图,饼状图)

http://blog.csdn.net/gisfarmer/article/details/3736452 Chart饼状图,每根柱子的宽度: int a = Chart1.Series["Series1"].Points.Count;  Chart1.Series["Series1"].CustomProperties = "PointWidth=0.5";  Chart1.Width = Unit.Pixel(25 * a); 如果有多个S