Привет, я пытаюсь создать следующую диаграмму пончика, используя Chartist.js:
Вот как выглядит диаграмма в настоящее время:
Я пытаюсь найти, где и как я могу изменить цвета этой диаграммы в соответствии с первой диаграммой пончиков. Красный и розовый, по-видимому, являются значениями по умолчанию. Я не смог найти документацию о том, как достичь этой цели. Я также хотел бы настроить размер штриха и размер самой диаграммы. Любая помощь очень ценится!
Текущий код:
// ** 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>