Добавить внешнюю круговую полосу пончик круговой диаграммы

Я пытался построен пончик круговая диаграмма, которая выглядит следующим образомДобавить внешнюю круговую полосу пончик круговой диаграммы

главным вопросом является внешняя полоса ..

как я получаю эту внешнюю полосу. .

Пожалуйста, мне точка в правильном направлении

Я пытаюсь использовать 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

источник

2016-08-02 terminator

Не могли бы вы добавить рабочий пример кода? Это должно быть возможно путем наложения граничного 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

, что было блестящим решением .... спасибо большое .. Я думаю, это было единственное решение, потому что для нераспределенного сегмента внешней полосы мне нужен разный раздел. Я обновил вашу скрипку, чтобы получить то, что именно мне нужно. Всего один м вы можете рассказать, как я могу показать что-то в центре. Я хочу дышать. – terminator

Вы можете установить еще один div с более высоким индексом z, чтобы перенести его на передний план, как это https://jsfiddle.net/1sxj56r6/14/ – Luca

Добавить внешнюю круговую полосу пончик круговой диаграммы

ответ

Смежные вопросы