向甜甜圈饼图添加外部圆形条带

Question

我一直在尝试构建一个看起来像这样的甜甜圈饼图

主要问题是外带..

我怎么得到这个外带..

请指点我正确的方向

我正在尝试使用 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

Answer 1

您可以绘制另一个甜甜圈，更大，内孔更大，并将其放置在您的绘图后面，不是更优雅，但无需移动到 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
    }
});

I updated your jsfiddle

向甜甜圈饼图添加外部圆形条带

Add a outer circular strip to donut pie chart

jquery

html

css

flot

pie-chart