作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我一直在尝试构建一个看起来像这样的圆环饼图
主要问题是外带..
我如何得到这个外带..
请指出正确的方向
我正在尝试使用 flotchart,但如果您可以指导,我愿意使用任何其他建议
这是我目前为止摆脱掉的东西
<div id="report_score_summary" class="chart" style="height:303px;width:100%">
<script>
data_score_summary = [
{ label: "Description Score", data: 20, color: '#BA2B6B' },
{ label: "Image Score", data: 30, color: '#375EAB' },
{ label: "Header Score", data: 50, color: '#4BB748' },
{ label: "Content Score", data: 10, color: '#F6871E' },
{ label: "Title Score", data: 18, color: '#E1DC3A' },
{ label: "Free", data: 16, color: '#E6E5E3' }
];
$.plot(report_score_summary, data_score_summary, {
series: {
pie: {
innerRadius: 0.5,
show: true
}
}
});
setCode([
"$.plot('#report_score_summary', data_score_summary, {",
" series: {",
" pie: {",
" innerRadius: 0.5,",
" show: true",
" }",
" }",
"});"
]);
</script>
</div>
这里是 jsfiddle
最佳答案
您可以绘制另一个 donut ,更大,内孔更大,并将其放置在您的绘图后面,虽然不是更优雅,但无需移动到 SVG 即可工作(我认为这可能是更好的选择)
HTML
<div id="report_score_summary" class="chart" style="height:303px;width:100%;z-index:2;margin-top:75px;margin-left: 62px;">
</div>
<div id="report_score_summary_outer" class="chart" style="height:453px;width:100%;position: absolute; top: 0; left: 0;z-index: 1;">
</div>
JS
$.plot(report_score_summary_outer, data_score_summary, {
series: {
pie: {
innerRadius: 0.8,
width: 0.1,
show: true,
label: {
show: false
}
}
},
legend: {
show: false
}
});
关于jquery - 向 donut 饼图添加外部圆形 strip ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38722461/
有人可以帮我理解为什么我的饼图百分比计算不正确吗?看截图: 根据我的计算,如 RHS 上所示,支出百分比应为 24.73%。传递给 Highcharts 的值如下:- 花费:204827099.36-
我正在制作圆环饼图。 我设置数据的颜色并获取钻取(它是保存外部切片的数据和配置的对象)切片的颜色为同一组颜色。我想设置要在向下钻取对象中使用的不同颜色数组。请参阅附图(外层切片有两种颜色:橙色和透明)
我是一名优秀的程序员,十分优秀!