2016-07-12 5 views
1

Ist es möglich, mehrere Diagramme ineinander zu haben:Diagramm js Kreis- oder Ringdiagramme 3 innen statt 1

Bitte überprüfen js fiddle für „Single“ und was würde ich ist mag die als erstes haben, innen zweite und so weiter ...

var data = [ 
{ 
    label: "title 1", 
    value: 32, 
    color: "#444334" 
    }, { 
    label: "title 2",   
    value: 51, 
    color: "#f0f0f0" 
    }, { 
    label: "title 3", 
    value: 17, 
    color: "#8ba43a" 
}]; 

prüfen Bild angehängt (sorry über schlechte Grafik) image

Dank.

+0

Dies ist in Highcharts möglich: http://www.highcharts.com/demo/pie-donut. Ich weiß nichts über chart.js. – wergeld

+1

Check out: http://StackOverflow.com/a/33751574/4784342 –

+0

Als Ergänzung zu früheren Kommentaren: Es ist wirklich einfach in Highcharts, die einzige Meinung, die Sie setzen müssen, ist innerSize und Größe Ihrer Serie. Hier finden Sie ein Beispiel: http://jsfiddle.net/o690zwd0/ –

Antwort

1

Sie können dies tun, mit jqplot oder chart.js

Ein Beispiel aus jsplot:

$(document).ready(function(){ 
    var s1 = [['a',6], ['b',8], ['c',14], ['d',20]]; 
    var s2 = [['a', 8], ['b', 12], ['c', 6], ['d', 9]]; 

    var plot3 = $.jqplot('chart3', [s1, s2], { 
    seriesDefaults: { 
     // make this a donut chart. 
     renderer:$.jqplot.DonutRenderer, 
     rendererOptions:{ 
     // Donut's can be cut into slices like pies. 
     sliceMargin: 3, 
     // Pies and donuts can start at any arbitrary angle. 
     startAngle: -90, 
     showDataLabels: true, 
     // By default, data labels show the percentage of the donut/pie. 
     // You can show the data 'value' or data 'label' instead. 
     dataLabels: 'value' 
     } 
    } 
    }); 
}); 

Nach der jqplot Seite, bedarf es mindestens jquery 1.9.1, zusammen mit ihm Haupt jqplot ist, und jqplot pieRenderer/donutRenderer-Skripte und jqplot css.

Der obige Code wird so etwas wie den folgenden:

jqplot

Sie eine andere Reihe hinzufügen können, die einen dritten Kreis schaffen.

+0

Wie fügt man ein Label für jeden der Charts hinzu? Alles andere ist gut. – Morpheus

+0

@Morpheus Ich denke, Sie können 'Legende: {show: true, location:' e '}' hinzufügen und es wird eine Legende angezeigt. Für Labels mit Pfeilen ou ähnlich, je ne sais pas, sorry –

+0

@Morpheus Sie definieren die Legende nach, wie diese http://stackoverflow.com/a/12136777/1675954 –

Verwandte Themen