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 ...
随机推荐
- arcgis中的Join(合并连接)和Relate(关联连接)
arcgis中的Join(合并连接)和Relate(关联连接) 一.区别 1.连接关系不一样. Relate(关联连接)方式连接的两个表之间的记录可以是“一对一”.“多对一”.“一对多”的关系 Joi ...
- 【网易官方】极客战记(codecombat)攻略-地牢-攻破突袭
关卡连接: https://codecombat.163.com/play/level/hack-and-dash 通过加速药来逃离地牢精灵 简介: 空气中弥漫着危险的气息.你应该从地牢里逃出来. 但 ...
- FreeRTOS学习笔记5:队列
为通信而准备 1.任务存储存储缓冲机制:先进先出 FIFO 后进先出 LIFO (ucOS消息队列采用的是引用传递,传递的都是指针.采用引用的话,内容必须一致保持可见性,即消息内容必须有效.1.不能传 ...
- python lib timeit 测试运行时间
目录 1. 简介 1.1. python interface 2. 案例 2.1. timeit() /repeat() 2.2. timer() 1. 简介 27.5. timeit - Measu ...
- 关于Element UI中select组件中遇到的问题
问题一:在使用select组件设置多选功能后,窗口抖动问题? 详细描述:在我使用select做多选的功能时出现了窗口抖动的问题,测试的时候发现,在有些人的电脑上抖动,有些人的电脑上不抖,找了很多文档, ...
- Network - HTTP 可能遇到的状态码
1. 概述 工作中, 会遇到 形形色色 的状态码 虽然这些状态码, 很多都是自定义的, 但是很多的 自定义, 还是有些 约定俗成 的规律 状态 虽然现在发布了, 但是基本算是没有, 还得慢慢补充 2. ...
- 【PAT甲级】1105 Spiral Matrix (25分)
题意:输入一个正整数N(实则<=1e5),接着输入一行N个正整数(<=1e4).降序输出螺旋矩阵. trick: 测试点1,3运行超时原因:直接用sqrt(N)来表示矩阵的宽会在N是素数时 ...
- KFC 小猪短租
# 分析肯德基门店信息 import requests,json post_url = 'http://www.kfc.com.cn/kfccda/ashx/GetStoreList.ashx?op= ...
- web学习---html,js,php,mysql一个动态网页获取流程
使用bootstrap的cms模版系统搭建了一个信息管理系统.通过这个系统学习动态网页获取的工作流程. 抓包分析一个页面的数据请求流程如下图所示: 同样,对于需要向数据库插入数据,可以使用ajax接口 ...
- RocketMq-粪发涂墙1.0
角色 说明 Producer 生产者,用于将消息发送到RocketMQ,生产者本身既可以是生成消息,也可以对外提供接口,由外部来调用接口,再由生产者将受到的消息发送给MQ. Consumer 消费者, ...