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 ...
随机推荐
- @AliasFor 原理
用法: import org.springframework.core.annotation.AliasFor; import java.lang.annotation.*; @Target(El ...
- opencv:轮廓匹配
#include <opencv2/opencv.hpp> #include <iostream> using namespace cv; using namespace st ...
- nodejs--wechat模块,微信公共平台自动回复消息接口服务中间件
npm 程序官网 https://www.npmjs.com/package/wechat 别人使用笔记网址 https://blog.csdn.net/golduty2/article/detail ...
- 【 Struts2 过滤器】
LoginInterceptor package k.util; import com.opensymphony.xwork2.ActionInvocation; import com.opensym ...
- 前端——语言——Core JS——《The good part》读书笔记——第五章节(Inheritance)
本章题目是继承,实质上介绍JS如何实现面向对象的三大特性,封装,继承,多态.本章的最后一个小节介绍事件. 与Java语言对比,虽然名称同样称为类,对象,但是显然它们的含义存在一些细微的差异,而且实现三 ...
- 接入HikariCP遇到问题
老Tomcat项目在接入HikariCP时遇到报错: Caused by: java.lang.AbstractMethodError: com.mysql.jdbc.Connection.isVal ...
- PHPStorm设置Ctrl+滚轮调整字体大小
1.点击左上角的File,再点击setting: 2.Editor->General,选择Change font size (Zoom) with Ctrl+Mouse Wheel: 3.点击O ...
- Gitlab+Jenkins用钩子实现git提交后jenkins自动化构建
Gitlab+Jenkins用钩子实现git提交后jenkins自动化构建 一.Jenkins 进入项目---->Configure 1.设置项目代码从git中拉取 2.设置钩子程序 二.git ...
- RS422接口与RS485接口
RS422具体接线参考网站 RS485接口 RS485设备为半双工设备,RS485收发器信号相关引脚包括控制引脚.485A.485B,其中控制引脚的高低电平决定当前处于接收模式还是发送模式. RS48 ...
- ACM-ICPC实验室20.2.19测试-图论
B.Harborfan的新年拜访Ⅱ 就是一道tarjan缩点的裸题. 建图比较麻烦 以后遇到这种建图,先用循环把样例实现出来,再对着循环写建图公式 #include<bits/stdc++.h& ...