Chart.js – Plusieurs graphiques de beignets sur la même canvas

J’essaie de simuler un graphique en couches multi-couches en initialisant Chart.js plusieurs fois sur le même document. Un seul graphique est visible à la fois. L’autre sera visible lorsque vous survolerez sa position…

Est-ce que quelqu’un sait comment rendre les deux visibles en même temps?

Voici mon code:

   Doughnut Chart   body{ padding: 0; margin: 0; } #canvas-holder-1{ position: fixed; top: 50%; left: 50%; margin-top: -250px; margin-left: -250px; }      
  var doughnutData = [ { value: 20, color:"#F7464A", highlight: "#FF5A5E", label: "Red", }, { value: 50, color: "#46BFBD", highlight: "#5AD3D1", label: "Green" }, { value: 30, color: "#FDB45C", highlight: "#FFC870", label: "Yellow" }, { value: 40, color: "#949FB1", highlight: "#A8B3C5", label: "Grey" }, { value: 120, color: "#4D5360", highlight: "#616774", label: "Dark Grey" } ]; var doughnutData2 = [ { value: 10, color:"#F7464A", highlight: "#FF5A5E", label: "Red", }, { value: 100, color: "#46BFBD", highlight: "#5AD3D1", label: "Green" }, { value: 20, color: "#FDB45C", highlight: "#FFC870", label: "Yellow" }, { value: 60, color: "#949FB1", highlight: "#A8B3C5", label: "Grey" }, { value: 120, color: "#4D5360", highlight: "#616774", label: "Dark Grey" } ]; window.onload = function(){ var ctx = document.getElementById("chart-area").getContext("2d"); window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, { responsive : false, animateScale: false, animateRotate:false, animationEasing : "easeOutSine", animationSteps : 80, percentageInnerCutout : 90, }); myDoughnut.outerRadius= 200; window.myDoughnut2 = new Chart(ctx).Doughnut(doughnutData2, { responsive : false, animateScale: false, animateRotate:false, animationEasing : "easeOutSine", animationSteps : 80, percentageInnerCutout : 90 }); };

Merci Jochen

Avoir 2 éléments de canvas et les positionner l’un sur l’autre en utilisant CSS. La canvas intérieure comporte le beignet intérieur et des bords arrondis afin de couvrir le moins possible le beignet extérieur.

Aperçu

entrez la description de l'image ici

HTML

CSS

 #w { position: relative; height: 400px; width: 400px; } #d1, #d2 { position: absolute; } #d1 { top: 0px; left: 0px; } #d2 { border-radius: 150px; top: 50%; left: 50%; transform: translate(-50%, -50%); }

Fiddle – https://jsfiddle.net/rhLxawt5/

À ce stade, nous disposons d’un diagramme à secteurs d’aspect relativement décent, avec des beignets ne se chevauchant pas. Toutefois, nos info-bulles seront tronquées car elles font toujours partie de leurs canvass respectives.

Nous pouvons contourner ce problème en écrivant une fonction customTooltips pour utiliser un div au lieu de dessiner un rectangle dans le canevas.

Fiddle – https://jsfiddle.net/rca0ync3/

Vous pouvez utiliser plusieurs jeux de données. Consultez la page de démonstration de Chart JS:

http://www.chartjs.org/samples/latest/charts/doughnut.html

En outre, voici un exemple avec plusieurs jeux de données et plusieurs étiquettes:

https://jsfiddle.net/moe2ggrd/1/

La partie importante:

  ... var myChart = new Chart(ctx, { type: 'doughnut', data: { labels: ["Green", "Yellow", "Red", "Purple", "Blue"], datasets: [{ data: [1, 2, 3, 4, 5], backgroundColor: [ 'green', 'yellow', 'red', 'purple', 'blue', ], labels: [ 'green', 'yellow', 'red', 'purple', 'blue', ] }, { data: [6, 7, 8], backgroundColor: [ 'black', 'grey', 'lightgrey' ], labels: [ 'black', 'grey', 'lightgrey' ], }, ] }, ...

J’espère que ça aide quelqu’un qui essaie de faire la même chose.