一個外圓條添加到圓環圓餅圖

我一直在試圖建立一個圓環圓餅圖，看起來像這樣一個外圓條添加到圓環圓餅圖

主要問題是外部帶..

我如何獲得這條外部。。

請點我在正確的方向

我想使用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

一個外圓條添加到圓環圓餅圖

回答

相關問題