效果:

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. fiddler中文乱码解决方案

    只用添加一个注册表变量就行 cmd窗口执行regedit命令,在弹出的注册表编辑界面找到fiddler 右击新建一个字符传值 HeaderEncodingGBK 结果如上图右所示~ 重启fiddler ...

  2. bugku 隐写2

    首先打开链接发现是一张图片 然后分析一下图片 发现这个图片实际是一个压缩包 然后更改一下后缀名 改成zip 然后解压之后会发现另一个压缩包和一张图片压缩包需要密码然后这个图片是一个提示 然后分析 (我 ...

  3. Codeforces Round #599 (Div. 2) C. Tile Painting

    Ujan has been lazy lately, but now has decided to bring his yard to good shape. First, he decided to ...

  4. 【安卓逆向】反编译ELF的另类技巧

    IDA 反编译 ObjDump反编译 ObjDump是ndk环境自带的一个脚本,在android-ndk-r10c/toolchains/arm-linux-androideabi-4.9/prebu ...

  5. JS json对象(Object)和字符串(String)互转方法

    [JS json对象(Object)和字符串(String)互转方法] 参考:https://blog.csdn.net/wenqianla2550/article/details/78232706 ...

  6. Spring Boot 升级框架版本 Spring 5.2 Invalid argument syntax org.springframework.core.env.Simple CommandLineArgs

    Invalid argument syntax org.springframework.core.env.Simple CommandLineArgs Parser.parse 具体问题应该是启动的c ...

  7. Eclipse C++配置静态链接库和动态链接库

    转:https://blog.csdn.net/iteye_20658/article/details/82650699 1.动态库: 一.创建动态链接库1.创建工程new->project-& ...

  8. innerHTML,innerText,textContent

    参考理解 https://www.e-learn.cn/content/html/1765240 https://developer.mozilla.org/zh-CN/docs/Web/API/El ...

  9. PHP获取用户的真实IP地址,非代理IP

    function getClientIP(){ global $ip; if(getenv("HTTP_CLIENT_IP")){ $ip = getenv("HTTP_ ...

  10. jquery 获取 父级 iframe 里的控件对象

    window.parent.document.getElementsByTagName('iframe')[0].contentWindow.document.getElementById('id')