Utiliser Chartist.js comment changer la couleur de la touche pour un tableau de donuts?
Bonjour j'essaie de créer le tableau de donuts suivant en utilisant Chartist.js:
voici à quoi ressemble le graphique:
j'essaie de trouver où ou comment je peux changer les couleurs de ce tableau pour correspondre au 1er tableau des beignets. Le rouge et le rose semblent être les valeurs par défaut. Je n'ai pas pu trouver de documentation sur la façon d'atteindre cet objectif. Je voudrais également comme pour 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>
4 réponses
Donc j'ai pensé à elle...
j'ai dû aller dans css et annuler les valeurs par défaut. Je devais m'assurer que le fichier css était chargé après le cdn pour Chartist. Ensuite, il suffit de définir la largeur et la hauteur du 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;
}
puis j'ai dû ajouter la touche donutWidth à l'objet chart pour définir la largeur de la touche:
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 des CSS pour contrôler les couleurs, les tailles, etc. des charts. Je suggère de jeter un coup d'oeil à la documentation ici pour apprendre beaucoup de trucs et astuces: https://gionkunz.github.io/chartist-js/getting-started.html
mais à votre question spécifique, voici une exception à partir du lien ci-dessus qui vous dit comment contrôler le tableau des beignets:
/* 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;
}
un peu plus tard ici, mais vous pouvez fournir des noms de classe à la série de données pour vous permettre de changer les couleurs sur chaque graphique indépendamment:
Dans la doc:
la propriété series peut aussi être un tableau d'objets de valeur qui contiennent une propriété value et une propriété className pour outrepasser la classe CSS nom pour le groupe de séries.
au Lieu de:
series: [70, 30]
le Faire ceci:
series: [{value: 70, className: 'foo'}, {value: 30, className: 'bar'}]
et ensuite vous pouvez choisir le style que vous voulez avec le stroke propriété css
j'ai réussi à changer la couleur de la touche en remplaçant cette classe. Vous pouvez changer ct-série-b à quel graphique à barres vous changez pour changer de couleur (ct-Série-a, ct-série-b et 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>