189 8069 5689
1、打开jsecharts圆环饼状图文档，选择任一空白单元格，点击右键-设置单元格格式。
创新互联建站专注于企业成都全网营销、网站重做改版、花都网站定制设计、自适应品牌网站建设、H5高端网站建设、商城网站建设、集团公司官网建设、外贸营销网站建设、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为花都等各大城市提供网站开发制作服务。
2、在弹出的设置单元格格式对话框中，点击边框，点单元格边框斜线样式。
3、在单元格内，输入表头字段，如项目时间项目阶段，然后将鼠标放在“项目时间”后，使用ALT+ENTER实现强制换行。
4、通过空格键，将“项目时间”移至合适的位置，即可。jsecharts圆环饼状图中这样设置斜杠前后数据不一样的样式。
简单的说就是计算出一圈圆周点集作为路径，然后通过修改元素的left和top来使他移动，感觉就像是在做圆周运动。希望有帮到你。
样例代码如下：
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""
html xmlns=""
head
meta http-equiv="Content-Type" content="text/html; charset=gb2312" /
titlejs曲线/title
style type="text/css"
#d2{background: none repeat scroll 0 0 #FF3300;
border-radius: 78.5px 78.5px 78.5px 78.5px;
color: #FFFFFF; padding:44px 50px;
position: absolute;
}
#d1{position:absolute;width:100px;height:100px;background:red;left:0px;}
.point{position:absolute;width:1px;height:1px; background:red;}
/style
script type="text/javascript"
var array = new Array();
function circle(a,b,r){
for(var times=0; times720; times++) {
var hudu = (2*Math.PI / 360) * 1 * times;
var X = a + Math.sin(hudu) * r;
var Y = b - Math.cos(hudu) * r
var point = document.createElement('div');
document.body.appendChild(point);
point.className = 'point';
point.style.top = Y +'px';
point.style.left = X + 'px';
array[times] = point;
}
}
function moveCircle(){
var t = 0 ;
var speed = 1;
var a = 4/1000;
var b = -3;
var c = 600;
var i = 0;
var d = document.getElementById('d2');
var w = d.offsetWidth;
var h = d.offsetHeight;
var timer=setInterval(function(){
d.style.left = array[i].offsetLeft -w/2+'px';
d.style.top = array[i].offsetTop -h/2+'px';
i++;
if(i = array.length){
i = 0;
}
},speed);
}
window.onload = function(){
circle(600,400,200);
moveCircle();
}
/script
/head
body
div id="d2"/div
/body
/html
项目需要做个环形的导航排列，网上找到一篇详细介绍原理的文章 javascript-按圆形排列DIV元素(一)---- 分析 ，然后尝试着把它实现了，效果图如下：
源码分享给大家哦，拿走不谢O(∩_∩)O
vue版本的根据项目需求做了些略微的修改
你是指下面这种小球吗？
这个是可以用jquery做的 它是一个jquery圆环统计插件circliful 来完成的
方法如下：
使用方法
link href="css/jquery.circlify.css" rel="stylesheet" type="text/css" /
script src=""/script
script src="js/jquery.circliful.min.js"/script
如果需要 fontawesome icons图片，请引入相关的CSS文件
将一个元素添加到页面中，并添加一个惟一的id值，并在data属性写上你需要的值，代码如下：
div id="myStat" data-dimension="250" data-text="35%" data-info="New Clients" data-width="30" data-fontsize="38" data-percent="35" data-fgcolor="#61a9dc" data-bgcolor="#eee" data-fill="#ddd" data-total="200" data-part="35" data-icon="long-arrow-up" data-icon-size="28" data-icon-color="#fff"/div
写入JS初始化插件
$( document ).ready(function() {
$('#myStat').circliful();
});
参数
dimension / 元素的高度与宽度 / 默认值 200px X 200px
text / 圆环内显示的文本
info /圆环内text文本下方的文字信息 ，可以为空
width / 圆环的大小 / 默认值 15px
fontsize /文本的字体大小 / 默认 15px
percent / 百分比，可以是1到100间的任意数值
fgcolor / 圆环的前景色 / 默认值 #556b2f
bgcolor / 圆环的背景色 / 默认值 #eee
fill / 整个圆环的背景色 ，可以为空
type / 全环或是半环，设计 data-type="half" 显示成半圆环 / 默认值 circle
total / 总量，百分比，比如你有 750MB 空间， 350MB 是使用的. 你就可以这样设置 data-total="750" 和 data-part="350" ，圆环将会显示成百分比 36,85%
part
border / 圆环的边框.
icon / Fontawesome icon
iconsize / icon的大小
iconcolor / icon的颜色
animationstep /动画的步阶, use 0 to disable animation, 0.5 to slow down, 2 to speed up, etc / default is 1
startdegree / 开始前景动的位置 / 默认值 0
bordersize / 边框的宽度
var path = svgdoc.createElement("path");
path.setAttribute("d","M400 400 L400 300 A400 400 90 0 1 500 400 Z");
path.setAttribute("style","fill:none;stroke:#00f;stroke-width:2");
svgdoc.rootElement.appendChild(path);
这个代码是画四分之一个圆，圆环你自己算下坐标，用PATH画，A是画弧线的
path的相关知识，你百度你里面看下，这里就不多说了
第一，利用Highcharts制作图形，需要引入Highcharts的核心js，由于Highcharts中需要用到jquery，需要引入到以下两个js：
script type="text/javascript" src="../scripts/jquery-1.11.2.js"/script
script type="text/javascript" src="../scripts/highcharts.js"/script
第二，保证初始化时图形就显示出来，将Highcharts中的js放到
$(function(){
});中
如下图所示：
第三，要使图形在页面上显示，需要图形的容器
div id="pieChart"/div
如下图所示：
启动服务器后，在浏览器地址输入地址后，显示图形如下：
这个显示的是饼图，而项目需要的是圆环图，我在官网上有如下圆环图，大小圆没有间距，不符合项目实现
于是，我查找了Highcharts API中的各种属性，找到了innerSize
innerSize:'50%'
刷新浏览器中的地址，重新看到圆环图，这种圆环图符合项目中的要求