一个外圆条添加到圆环圆饼图

我一直在试图建立一个圆环圆饼图，看起来像这样一个外圆条添加到圆环圆饼图

主要问题是外部带..

我如何获得这条外部。。

请点我在正确的方向

我想使用flotchart，但我乐于使用任何行吟诗人[R建议，如果你能引导

这是我迄今

<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

来源

2016-08-02 terminator

您可以加入你的代码的工作示例？这应该是可能的覆盖一个border-radious边框div：在图表顶部50％ –

我会在这里使用SVG .... –

如果有一个清晰的容器元素，您可以使用，我会使用psuedo-element来创建效果：http://codepen.io/ryantdecker/pen/pbOwpW 这是使用静态值，但是如果你发布你的代码，我相信如果需要它可以是动态的（相对度量与示例中的设置px值 – ryantdecker

你可以绘制另一个甜甜圈，摆脱大具有较大的内孔和它的位置你的阴谋的幕后，不是更优雅，但没有搬迁工作，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>

$.plot(report_score_summary_outer, data_score_summary, { 
    series: { 
     pie: { 
      innerRadius: 0.8, 
     width: 0.1, 
      show: true, 
     label: { 
       show: false 
      } 
     } 
    }, 
    legend: { 
     show: false 
    } 
});

I updated your jsfiddle

来源

2016-08-02 14:55:38 Luca

jsfiddle这是一个辉煌的解决方案....非常感谢..我想这是唯一的解决方案，因为对于未分配的外部区段我想要不同的部分..我更新了你的小提琴，以得到我所需要的东西..只有一米你可以告诉我如何在中心展示一些东西，即甜甜圈的洞 – terminator

你可以设置另一个具有更高z-索引的div，使其像这样https://jsfiddle.net/1sxj56r6/14/ – Luca

一个外圆条添加到圆环圆饼图

回答

相关问题