highcharts饼图
效果:

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饼图的更多相关文章
- highCharts 饼图动态加载
饼图的动态加载 (1):导入样式 <script type="text/javascript" src="<%=request.getContextPath( ...
- Highcharts 饼图 文字颜色设置
设置饼图对应的提示文字的颜色与饼图块状一样,demo如下: $(function () { $('#container').highcharts({ chart: { plotBackgroundCo ...
- FusionCharts和highcharts 饼图区别!
FusionCharts ---------------脚本--------------- <script src="../../../fashioncharts/js/FusionC ...
- HighCharts 饼图
@{ ViewBag.Title = "Index"; Layout = "~/Views/Shared/_Layout.cshtml"; } @section ...
- highcharts 饼图显示数据比例如何保留二位小数
var NewPerCent=parseFloat(NewPerCent.toString()).toFixed(2);return '<b>'+ this.point.name +'&l ...
- Highcharts 饼图数值显示在图形上
1.引用js文件 <script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1 ...
- Highcharts之饼图
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- HighCharts 在IE8下饼图不显示的问题
HighCharts饼图用来做数据统计时,在IE8下发现某些图形不能正确显示出来. 在IE8下面会报 'this.renderer.gradients' 为空或不是对象 这样的错误.. 解决方法: ...
- 【Highcharts】 绘制饼图和漏斗图
1.outModel类设计 设计outModel类首先研究下Highcharts中series的data数据格式,发现饼图和漏斗图都可以使用这样格式的数据 series: [{ name: 'Uniq ...
随机推荐
- form中把图片设为按钮
提交按钮sumbit <input type="image" src="图片路径">//type="image"默认是sumbi ...
- kuangbin专题 专题九 连通图 POJ 1236 Network of Schools
题目链接:https://vjudge.net/problem/POJ-1236 题目:有向图,有若干个连通图,点之间有单向边边就可以单向传递信息,问: (1)至少需要发送几份信息才能使得每个点都传递 ...
- Codeforces Round #610 (Div. 2)C(贪心,思维)
沿时间轴枚举,发现关键时间点在于新题目被锁定的前一时间,那是新的题目还没有被锁定并且距离旧的题目已经被锁定的最晚时间,对这些时间点进行操作 #define HAVE_STRUCT_TIMESPEC # ...
- star_namelist
Yua Mikami Shion Utsunomiya Mizuho Uehara Yui Hatano 波多野结衣 Tsubasa Amami Rei Mizuna 水菜丽 Eimi Fukada ...
- C#中的switch
switch 表达式支持的类型为 sbyte.byte.short.ushort.int.uint.long.ulong.char.string 或枚举类型,或者可以隐试转换到这些类型的自定义对象或其 ...
- Yii2中事务的使用
官方是这样的 // $connection其实是数据库连接$transaction = $connection->beginTransaction(); try { $connection-&g ...
- Linux下tail命令的使用方法
Linux下tail命令的使用方法: linux tail命令用途是依照要求将指定的文件的最后部分输出到标准设备,通常是终端,通俗讲来,就是把某个档案文件的最后几行显示到终端上,假设该档案有更新,ta ...
- js的基本分类(0.1)
js分内嵌,内联,外部样式表三种, js的组成分,ES(变量,函数,对象,数组,判断,循环),BOM(浏览器对象模型),DOM(文档对象模型), js的五种输出语句,alert(警告框),confir ...
- via/route blockage/size blockage/wire/pin guide/pin blockage/partition
1.via 中文名称互连线通孔.我们知道,芯片的连线有不同层的金属互连线相互连接.而Via的作用就是连接这些不同层的金属.如下图所示: 一个完整的通孔是由三层组成的,包括两个互连层和一个cut层,cu ...
- 《实战Java高并发程序设计》读书笔记三
第三章 JDK并发包 1.同步控制 重入锁:重入锁使用java.util.concurrent.locks.ReentrantLock类来实现,这种锁可以反复使用所以叫重入锁. 重入锁和synchro ...