einen äußeren kreisförmigen Streifen Donut Kreisdiagramm hinzufügen

Ich habe ein Donut Kreisdiagramm gebaut versucht, dass der äußere Streifen ..einen äußeren kreisförmigen Streifen Donut Kreisdiagramm hinzufügen

Wie kann ich wie dieser ist erhalten diese äußere Streifen

Hauptproblem sieht.

Bitte zeigen Sie mir in die richtige Richtung

ich versuche flotchart zu verwenden, aber ich bin offen jede othe verwenden r Vorschlag, wenn Sie führen kann

das ist, was ich loswerden bisher

<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>

Hier ist jsfiddle

Quelle

2016-08-02 terminator

Könnten Sie ein funktionierendes Beispiel für Ihren Code hinzufügen? Dies sollte möglich sein, indem man ein begrenztes div mit border-radious überlagert: 50% oben auf dem Diagramm –

Ich würde hier ein SVG verwenden .... –

Wenn es ein klares Containerelement gibt, mit dem Sie arbeiten können, würde ich ein verwenden psuedo-element, um den Effekt zu erstellen: http://codepen.io/ryantdecker/pen/pbOwpW Dies ist mit statischen Werten, aber wenn Sie Ihren Code veröffentlichen, bin ich sicher, dass es dynamisch gemacht werden kann, wenn nötig (relative Maße vs. die im Beispiel eingestellten px-Werte – ryantdecker

Sie könnten einen anderen Donut plotten, größer mit einem größeren Innenloch und positionieren Sie es hinter dem Grundstück , nicht mehr elegant, aber das arbeiten ohne Wechsel zu SVG (dass ich denke, könnte eine bessere Wahl sein)

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

Quelle

2016-08-02 14:55:38 Luca

aktualisiert das war eine geniale lösung .... vielen dank ... ich denke, das war die einzige lösung, denn für das nicht zugewiesene segment des äußeren streifens wollte ich den anderen abschnitt .. ich habe deine fiddle aktualisiert, um das zu bekommen was genau ich brauchte .. Nur ein m Erzgunst können Sie erzählen, wie ich etwas im Zentrum zeigen kann, d. h. Loch von Donut – terminator

Sie könnten ein anderes Div mit einem höheren Z-Index setzen, um es wie dieses https://jsfiddle.net/1sxj56r6/14/ – Luca

einen äußeren kreisförmigen Streifen Donut Kreisdiagramm hinzufügen

Antwort

Verwandte Themen