使用Chartist.js如何更改圆环图的笔画颜色？
您好我想使用Chartist.js创建以下圆环图：
目标图表
这就是图表目前的样子：
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：
所以我想通了……
我不得不进入css并覆盖默认值。 我必须确保在Chartist的cdn之后加载了css文件。 然后只需设置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; }
然后我必须将donutWidth键添加到图表对象以设置笔触宽度：
var chart = new Chartist.Pie('.ct-chart', { series: [7, 3], labels: [1, 2] }, { donut: true, donutWidth: 42, showLabel: false });
Chartist依赖于修改CSS来控制图表的颜色，大小等。 我建议你看一下这里的文档，学习很多很棒的技巧和窍门： https ： //gionkunz.github.io/chartist-js/getting-started.html
但是对于您的具体问题，除了上面的链接告诉您如何控制圆环图之外，这里有一个：
/* 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; }
稍后，您可以为数据系列提供类名，以便您可以单独更改每个图上的颜色：
来自文档：
series属性也可以是包含value属性和className属性的值对象数组，以覆盖系列组的CSS类名。
代替：
series: [70, 30]
做这个：
series: [{value: 70, className: 'foo'}, {value: 30, className: 'bar'}]
然后你可以使用stroke css属性设置样式
我已经设法通过覆盖这个类来改变笔触颜色。 您可以将ct-series-b更改为您更改的条形图以更改颜色（ct-series-a，ct-series-b等）。
上面的答案对我不起作用，因为我动态地排除了0分的类别。 你可以务实地做到这一点。 您可以直接修改svg节点。 我的图表使用填充而不是笔划，但方法应该相同。 这在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]); });
}