我尝试使用本教程中的％图表：https://codepen.io/anon/pen/XERbXQ
<div class="graphsWrapper">
<section class="sect">
<div>
<div class="box-piesite">
<header>
<h1>Awwwards Pies</h1>
<p>Let's take a peak at them simple pie's</p>
</header>
<ul>
<li class="design">
<div class="piesite" id="pie_0" data-pie="2.04"></div>
</li>
<li class="usability">
<div class="piesite" id="pie_2" data-pie="5.00"></div>
</li>
<li class="creativity">
<div class="piesite" id="pie_1" data-pie="2.00"></div>
</li>
<li class="content">
<div class="piesite" id="pie_3" data-pie="6.43"></div>
</li>
</ul>
</div>
</div>
</section>
</div>
我可以毫无问题地让它工作，唯一的问题是我希望进度边框更薄，但我改变以尝试修复它的每个css样式都不会影响它。我用谷歌搜索了它，也许我使用了错误的术语，但我找不到任何答案。任何帮助深表感谢！
我试图复制的想法是在这个页面的中间位置：
答案 0 :(得分：2)
您需要问的是：导致圆的宽度的原因是什么。显而易见的反应是 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>json2csv</title>
<meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" crossorigin="anonymous"></script>
</head>
<body>
<div id="content"></div>
</body>
<script type="text/javascript">
fetch('http://path/to/json/file')
.then(function(response) {
function flatObjectToString(obj){
var s = ""
Object.keys(obj).map(key=>{
if(obj[key] === null){
s+= key +":"
}else if(obj[key].toLocaleDateString){
s+=key+": " +obj[key].toLocaleDateString() +"\n"
}else if(obj[key] instanceof Array){
s+= key+":\n" +listToFlatString(obj[key])
}else if(typeof obj[key] == "object"){
s+= key+":\n" +flatObjectToString(obj[key])
}else{
s+= key+":" +obj[key]
}
s+= "\n"
})
return s
}
function listToFlatString(list) {
var s = "";
list.map(item => {
Object.keys(item).map(key => {
s+="\n"
if (item[key] instanceof Array) {
s += key + "\n" + listToFlatString(item[key])
}else if(typeof item[key] == "object" && item[key] !== null){
s+= key+": " + flatObjectToString(item[key])
} else {
s += key + ": " + (item[key] === null ? "" : item[key].toLocaleDateString ? item[key].toLocaleDateString : item[key].toString())
}
})
})
return s;
}
function flatten(object, addToList, prefix) {
Object.keys(object).map(key => {
if (object[key] === null) {
addToList[prefix + key] = ""
} else
if (object[key] instanceof Array) {
addToList[prefix + key] = listToFlatString(object[key])
} else if (typeof object[key] == 'object' && !object[key].toLocaleDateString) {
flatten(object[key], addToList, prefix + key + '.')
}else{
addToList[prefix + key] = object[key]
}
})
return addToList
}
exportToCsv("download.csv", data.map(record=>flatten(record, {}, '')))
})
</script>
</html>
- 但改变只是让他们感动，所以不是那样。
接下来的事情是取出部分css，直到你不再得到一个空心圆，然后确定导致圆边界的原因。
，并提供：
border-width相应地调整.piesite:after {
content:'';
display:block;
position:absolute;
top:.05em;
left:.05em;
width:.9em;
height:.9em;
background:$color-lightgrey;
border-radius:0.5em;
z-index:1
}
top: left:和width:以及相互关联。
更新了codepen：https://codepen.io/anon/pen/JLNYyy