En utilisant Chartist.js, comment changer la couleur du trait pour un graphique en anneau?

Bonjour, je suis en train de créer le donut graphique à l'aide d'Chartist.js:

C'est ce que le graphique ressemble actuellement:

Je suis en train d'essayer de trouver où et comment je peux changer les couleurs de ce tableau correspondent à la 1ère donut graphique. Le rouge et le rose semblent être les valeurs par défaut. Je n'ai pas été en mesure de trouver toute la documentation de la façon d'atteindre cet objectif. Je voudrais également personnaliser la taille du trait et de 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 prerequisite 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:

<div class="ct-chart ct-perfect-fourth"></div>

source d'informationauteur Crystal O'Mara

J'ai donc pensé à elle...

J'ai dû aller dans le css et remplacer les valeurs par défaut. J'ai dû faire en sorte que le fichier css est chargé après la can pour Chartist. Puis il suffit de définir la largeur et la hauteur de ct-graphique.

.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û ajouter donutWidth la clé de l'objet 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 repose sur la modification des CSS pour contrôler les couleurs, tailles, etc. des charts.
Je vous suggère de jeter un oeil à la documentation ici pour en savoir beaucoup de fraîcheur des conseils et astuces: https://gionkunz.github.io/chartist-js/getting-started.html

Mais à votre question, voici une exception à partir du lien ci-dessus qui vous indique comment contrôler le beignet graphique:

/* 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 attribute */
  stroke-width: 5px !important;
  /* create modern looking rounded donut charts */
  stroke-linecap: round;
}

2

Un peu plus tard ici, mais vous pouvez fournir les noms de classe de la série de données pour vous permettre de modifier les couleurs de chaque graphique indépendante:

De la documentation:

La série de la propriété peut aussi être un tableau de la valeur des objets qui contiennent des
une valeur de la propriété et de propriété className pour remplacer la classe CSS
nom pour le groupe de séries.

Au lieu de:
```
series: [70, 30]
```
Ce faire:
```
series: [{value: 70, className: 'foo'}, {value: 30, className: 'bar'}]
```
et puis vous pouvez définir le style cependant, vous aimeriez avec le stroke propriété css

Vous devez vous connecter pour publier un commentaire.