web-dev-qa-db-fra.com

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 avec 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 tableau pour qu'il corresponde au premier graphique en beignet. 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 objectif. 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 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>
javascriptjquerychartsdonut-chartchartist.js
14
Crystal O'Mara

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û ajouter la clé donutWidth à 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
});
15
Crystal O'Mara

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:

À partir de la documentation:

La propriété de série peut également être un tableau d'objets de valeur contenant une propriété value et une propriété className pour remplacer la classe CSS nom du groupe de séries.

Au lieu de: 

series: [70, 30]

Faites ceci: 

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

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

6
Jeremy Thomas

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

Mais pour répondre à votre question spécifique, voici une exception, sauf le lien ci-dessus, qui vous explique comment contrôler le graphique 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 attribute */
  stroke-width: 5px !important;
  /* create modern looking rounded donut charts */
  stroke-linecap: round;
}
6
Ageonix

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

<html>
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chartist/0.10.1/chartist.min.css" />
    <style>
        .ct-series-b .ct-bar, .ct-series-b .ct-line, .ct-series-b .ct-point, .ct-series-b .ct-slice-donut {
             stroke: goldenrod;
        }
    </style>
  </head>
  <body>
    <div class="ct-chart ct-perfect-fourth"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/chartist/0.10.1/chartist.min.js"></script>
    <script>
      window.onload = function() {
        var data = {
          labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
          series: [
            [5, 4, 3, 7, 5, 10, 3, 4, 8, 10, 6, 8],
            [3, 2, 9, 5, 4, 6, 4, 6, 7, 8, 7, 4]
          ]
        };

        var options = {
          seriesBarDistance: 10
        };

        var responsiveOptions = [
          ['screen and (max-width: 640px)', {
            seriesBarDistance: 5,
            axisX: {
              labelInterpolationFnc: function (value) {
                return value[0];
              }
            }
          }]
        ];

        new Chartist.Bar('.ct-chart', data, options, responsiveOptions);
      }
    </script>
  </body>
</html>

2
Felix II Rigor

Ce code a fonctionné pour moi pour changer la couleur du trait:

// Prepare chart params
var chartColors = ['orange'];
var chartWidth = 9;
var percent = 77;
var arc = percent ? 360 * percent / 100 : 0;

// Create chart
var chart = new Chartist.Pie('.my-donut', {
  series: [arc],
  labels: [percent + '%'],
}, {
  donut: true,
  donutWidth: chartWidth,
  startAngle: 0,
  total: 360,
});

// Set chart color
chart.on('draw', function(data) {
  if(data.type === 'slice') {
    if (chartColors[data.index]) {
      data.element._node.setAttribute('style','stroke: ' + chartColors[data.index] + '; stroke-width: ' + chartWidth + 'px');
    }
  }
});

0
Somerussian

Les réponses ci-dessus ne fonctionneront pas pour moi puisque j'exclus de manière dynamique les catégories avec 0 point. Vous pouvez cependant le faire de manière pragmatique. Vous pouvez modifier directement 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.setAttribute('style','fill:' + pieColors[data.index]);
    });

}

0
Mark Miller