效果:

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. js实现页面下拉后展示导航,以及点击导航自动滑动到相关页面

    //监控,下拉750px后展示导航 $(window).scroll(function(){ var $this = $(this); var targetTop = $(this).scrollTo ...

  2. 6_14 Abbott的复仇(UVa816)<图的最短路BFS>

    1999次世界总决赛的比赛包括一个骰子迷宫问题.在这个问题被写的时候,法官们无法发现骰子迷宫概念的原始来源.不久之后的比赛,但是,罗伯特先生雅培,无数的迷宫和对作者的创造者主题,联系大赛评委,自称是骰 ...

  3. [Reversal 剧情设计] 设定

    在正式写之前,先交代一些设定,便于后续的展开.先在这里说明一点,我的文笔可能很烂(因为在写小说方面还没有得到过别人的评价),只要你们能体会我想表达的东西就行(不过也的确是这样,如果作者构筑得过于详细, ...

  4. [Excel] 一些实用的函数式子

    这次是用php写了一个系统 收集信息,需要身份证号作为验证,但是为了信息安全 只能在数据库里面放身份证后六位.也就是说.最终导出的Excel也是只有身份证的后六位.,, 后来我发现我本地保存的完整身份 ...

  5. 查询 keystore文件的签名信息

    需要安装jdk 在安装 jdk的/bin文件夹下 keytool -v -list -keystore [keystore文件的路径]

  6. zookeeper and kafka

    kafka安装前期准备: 1,准备三个节点(根据自己需求决定) 2,三个节点上安装好zookeeper(也可以使用kafka自带的zookeeper) 3,关闭防火墙 chkconfig  iptab ...

  7. python爬虫-----Python访问http的几种方式

    爬取页面数据,我们需要访问页面,发送http请求,以下内容就是Python发送请求的几种简单方式: 会使用到的库  urllib   requests 1.urlopen import urllib. ...

  8. aarch64架构下安装tensorflow详细过程

    本人使用的是: EAIDK-610开发板,Redhat的Linux系统,arm64架构,python3.6环境. 重要的: 一定要下载符合自己环境架构相同的tensorflow安装包. 三种架构: x ...

  9. Win10上面安装vmware,并在Vmware上面安装Ubuntu

    一.安装vmware vmware安装包 链接:https://pan.baidu.com/s/178IOOuMOcotSrr6omIAM_A 提取码:c7ba vmware激活码 链接:https: ...

  10. C++记录(一)

    1 extern 符表示该变量不是当前作用域定义的,用于声明. 如extern i;表示i不是当前作用域里的,是其他某个include的cpp文件里的变量. 2 int *p=0;相当于初始化p为空指 ...