Utilisation de Chartist.js, comment modifier la couleur du trait pour un graphique en anneau?

Bonjour, j’essaie de créer le graphique en anneau suivant à l’aide de Chartist.js:

TABLEAU DES OBJECTIFS

Voici à quoi ressemble le graphique:

Chartist.js Donut Chart

J’essaie de trouver où et comment je peux changer les couleurs de ce graphique pour qu’il corresponde au 1er graphique en anneau Le rouge et le rose semblent être les défauts. Je n’ai pas été en mesure de trouver de documentation sur la manière d’atteindre cet objective. J’aimerais également personnaliser la taille du trait et la taille du graphique lui-même. Toute aide est grandement appréciée!

Code actuel:

// ** START CHARTIST DONUT CHART ** // var chart = new Chartist.Pie('.ct-chart', { series: [70, 30], labels: [1, 2] }, { donut: true, showLabel: false }); chart.on('draw', function(data) { if(data.type === 'slice') { // Get the total path length in order to use for dash array animation var pathLength = data.element._node.getTotalLength(); // Set a dasharray that matches the path length as prerequirejsite to animate dashoffset data.element.attr({ 'stroke-dasharray': pathLength + 'px ' + pathLength + 'px' }); // Create animation definition while also assigning an ID to the animation for later sync usage var animationDefinition = { 'stroke-dashoffset': { id: 'anim' + data.index, dur: 1000, from: -pathLength + 'px', to: '0px', easing: Chartist.Svg.Easing.easeOutQuint, // We need to use `fill: 'freeze'` otherwise our animation will fall back to initial (not visible) fill: 'freeze' } }; // If this was not the first slice, we need to time the animation so that it uses the end sync event of the previous animation if(data.index !== 0) { animationDefinition['stroke-dashoffset'].begin = 'anim' + (data.index - 1) + '.end'; } // We need to set an initial value before the animation starts as we are not in guided mode which would do that for us data.element.attr({ 'stroke-dashoffset': -pathLength + 'px' }); // We can't use guided mode as the animations need to rely on setting begin manually // See http://gionkunz.github.io/chartist-js/api-documentation.html#chartistsvg-function-animate data.element.animate(animationDefinition, false); } }); // ** END CHARTIST DONUT CHART ** //

HTML:

Alors je l’ai compris …

Je devais aller en css et remplacer les valeurs par défaut. Je devais m’assurer que le fichier css était chargé après le cdn de Chartist. Ensuite, il suffit de définir la largeur et la hauteur de ct-chart.

 .ct-series-a .ct-bar, .ct-series-a .ct-line, .ct-series-a .ct-point, .ct-series-a .ct-slice-donut { stroke: #0CC162; } .ct-series-b .ct-bar, .ct-series-b .ct-line, .ct-series-b .ct-point, .ct-series-b .ct-slice-donut { stroke: #BBBBBB; } .ct-chart { margin: auto; width: 300px; height: 300px; }

Ensuite, j’ai dû append la clé donutWidth à l’object graphique pour définir la largeur du trait:

 var chart = new Chartist.Pie('.ct-chart', { series: [7, 3], labels: [1, 2] }, { donut: true, donutWidth: 42, showLabel: false });

Chartist s’appuie sur la modification de CSS pour contrôler les couleurs, les tailles, etc. des graphiques. Je vous suggère de consulter la documentation ici pour découvrir de nombreux trucs et astuces: https://gionkunz.github.io/chartist-js/getting-started.html

Mais pour répondre à votre question spécifique, voici une exception du lien ci-dessus qui vous explique comment contrôler le diagramme en anneau:

 /* Donut charts get built from Pie charts but with a fundamentally difference in the drawing approach. The donut is drawn using arc strokes for maximum freedom in styling */ .ct-series-a .ct-slice-donut { /* give the donut slice a custom colour */ stroke: blue; /* customize stroke width of the donut slices in CSS. Note that this property is already set in JavaScript and label positioning also relies on this. In the right situation though it can be very useful to style this property. You need to use !important to override the style atsortingbute */ stroke-width: 5px !important; /* create modern looking rounded donut charts */ stroke-linecap: round; }

Un peu plus tard ici, mais vous pouvez donner des noms de classe à la série de données pour vous permettre de changer les couleurs de chaque graphique indépendamment:

De la docs:

La propriété series peut également être un tableau d’objects value contenant une propriété value et une propriété className pour remplacer le nom de la classe CSS du groupe de séries.

Au lieu de:

 series: [70, 30]

Faire ceci:

 series: [{value: 70, className: 'foo'}, {value: 30, className: 'bar'}]

et puis vous pouvez style comme vous le souhaitez avec la propriété css de stroke

J’ai réussi à changer la couleur du trait en surchargeant cette classe. Vous pouvez modifier ct-series-b en quel graphique à barres vous changez pour changer de couleur (ct-series-a, ct-series-b, etc.).

Les réponses ci-dessus ne fonctionneront pas pour moi car j’exclus de manière dynamic les catégories de 0 point. Vous pouvez cependant le faire de manière pragmatique. Vous pouvez directement modifier le noeud svg. Mes graphiques utilisent le remplissage au lieu du trait, mais la méthode doit être la même. Cela a fonctionné pour moi dans Chrome:

 const data = { series: [], labels: [] }; const pieColors = []; enrollment.CoverageLevelTotals.forEach(e => { if (e.Total === 0) return; data.series.push(e.Total); data.labels.push(e.Total); pieColors.push(colors[e.CoverageLevel]); }); new Chartist.Pie(document.getElementById(canvasId), data, { width: '160px', height: '160px', donut: true, donutWidth: 50, donutSolid: true, showLabel: (data.series.length > 1) }).on('draw',function (data) { if (data.type !== 'slice') return; data.element._node.setAtsortingbute('style','fill:' + pieColors[data.index]); });

}