效果:

JSON加载数据:

var chartseries2 = [
{
name: '完成' + data.rate + '%',
y: data.rate
},
{
name: '未完成' + data.rateless + '%',
y: data.rateless
}];
chart2.series[].setData(chartseries2);

定义:

chart2 = new Highcharts.Chart({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
renderTo: 'container2',
type: 'pie',
backgroundColor: 'rgba(0,0,0,0)' --设置背景色
},
title: {
text: ''
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
colors: ['#00DD00', '#FF0000'],
plotOptions: {
pie: {
size: '100%',
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#FFFF00',
distance: -, --设置偏移,使文字显示在图形内
connectorColor: '#000000',
format: '<b>{point.name}</b>',
style: {
fontWeight: ,
fontSize: "25px"--设置文字大小
}
},
formatter: function (index) {
return '<span style="color:#00008B;font-weight:bold">' + this.point.name + '</span>';
},
showInLegend: true
}
},
series: [{
data: [
{
name: '完成80%',
y:
},
{
name: '未完成20%',
y:
}
]
}]
});

highcharts饼图的更多相关文章

  1. highCharts 饼图动态加载

    饼图的动态加载 (1):导入样式 <script type="text/javascript" src="<%=request.getContextPath( ...

  2. Highcharts 饼图 文字颜色设置

    设置饼图对应的提示文字的颜色与饼图块状一样,demo如下: $(function () { $('#container').highcharts({ chart: { plotBackgroundCo ...

  3. FusionCharts和highcharts 饼图区别!

    FusionCharts ---------------脚本--------------- <script src="../../../fashioncharts/js/FusionC ...

  4. HighCharts 饼图

    @{ ViewBag.Title = "Index"; Layout = "~/Views/Shared/_Layout.cshtml"; } @section ...

  5. highcharts 饼图显示数据比例如何保留二位小数

    var NewPerCent=parseFloat(NewPerCent.toString()).toFixed(2);return '<b>'+ this.point.name +'&l ...

  6. Highcharts 饼图数值显示在图形上

    1.引用js文件 <script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1 ...

  7. Highcharts之饼图

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  8. HighCharts 在IE8下饼图不显示的问题

    HighCharts饼图用来做数据统计时,在IE8下发现某些图形不能正确显示出来. 在IE8下面会报  'this.renderer.gradients' 为空或不是对象 这样的错误.. 解决方法: ...

  9. 【Highcharts】 绘制饼图和漏斗图

    1.outModel类设计 设计outModel类首先研究下Highcharts中series的data数据格式,发现饼图和漏斗图都可以使用这样格式的数据 series: [{ name: 'Uniq ...

随机推荐

  1. Vue学习 Day01

    介绍 这个系列记录自己学习Vue的过程. Vue官方不推荐新手直接使用 vue-cli,所以前面这几天都是根据官方文档学习. 步骤 新建一个html文件. 在html中导入vue.js依赖. < ...

  2. FreeRTOS学习笔记3:内核控制及开启调度器

    内核控制函数API 应用层中不会用到taskYIELD() //任务切换.会自动切换当前就绪表里优先级最高的任务 临界区 //不能被打断的代码段任务中进入临界区任务中退出临界区中断服务进入临界区中断服 ...

  3. VS2015打开失败

    在使用VS2015过程中之前能打开的.Net项目,结果突然就不能使用了.我就不能理解了,后来找了一个方法,抱着试试的心态结果就成功了. 解决办法 第一步: 开始-->所有程序-->Micr ...

  4. gbase安装教程

    一.安装前的准备工作 1.对网卡进行配置 [root@gbase8a ~]#vi /etc/sysconfig/network-scripts/ifcfg-eth0 DEVICE=eth0 HWADD ...

  5. 1012 The Best Rank

    1012 The Best Rank 1. 注意点 一名同学同样排名下的科目优先级问题 不同同学分数相同时排名相同,注意 排名不是 1 1 2 3 4 这种, 而是 1 1 3 4 5 注意到有些同学 ...

  6. springboot无法查询到后台的数据

    问题:springbooot中,整合mybatis时,在IUserMapper接口中, @Select("select * from user where name like '%李%'&q ...

  7. INCA二次开发-INCACOM

    1.INCA介绍 INCA是常用的汽车ECU测试和标定的,广泛应用于动力总成等领域.INCA提供了丰富的接口,供用户自动化.定制化.本公众号通过几篇文章,介绍下一些二次开发的方法,本篇介绍INCA-C ...

  8. socket udp编程的一些积累的记录

    接了个小活,要求写udp的客户端,循环接收服务端的固定的指令并显示数据 我设计的逻辑是,用户在界面输入框输入服务器ip.端口,随后udp连接,开启线程循环接收,接收指令,解析成数据,存在结构体的lis ...

  9. oracle 基础sql语句

    修改date日期时间: update T2_FOODS_STORAGE_IN set create_time =to_date('2020-01-15 12:30:20','yyyy-mm-dd hh ...

  10. 企业级Docker镜像仓库Harbor部署与使用

    yum install docker 官网地址:https://docs.docker.com/compose/install/ 运行此命令以下载Docker Compose的当前稳定版本 1 sud ...