您好我正在尝试使用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>
答案 0 :(得分：17)
所以我想出来了......
我必须进入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
});
答案 1 :(得分：7)
稍后，您可以为数据系列提供类名，以便您可以独立更改每个图表上的颜色：
来自文档：
series属性也可以是包含的值对象数组 一个value属性和一个className属性来覆盖CSS类 系列组的名称。
代替：
series: [70, 30]
执行此操作：
series: [{value: 70, className: 'foo'}, {value: 30, className: 'bar'}]
然后你可以设置你喜欢的stroke css属性
答案 2 :(得分：6)
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;
}
答案 3 :(得分：2)
我已设法通过覆盖此类来更改笔触颜色。您可以将ct-series-b更改为您更改的条形图以更改颜色（ct-series-a，ct-series-b等）。
<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>
答案 4 :(得分：1)
我为使它起作用而做了以下工作。我正在使用条形图，但我猜所有图形都一样。
我的CSS
.ct-chart .ct-series.stroke-green .ct-bar {
stroke: green;
}
.ct-chart .ct-series.stroke-yellow .ct-bar {
stroke: rgba(255, 167, 38, 0.8);
}
.ct-chart .ct-series.stroke-red .ct-bar {
stroke: rgba(230, 20, 20, 0.8);
}
图表会议
{
labels: ['Jan', 'Feb'],
series: [
{className:"stroke-green", meta:"OK", data: [12,23] },
{className:"stroke-yellow", meta:"Rest", data: [34,34]},
{className:"stroke-red", meta: "NOK", data: [2, 5] },
]
}
答案 5 :(得分：0)
上述答案对我不起作用，因为我正在动态排除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]);
});
}
答案 6 :(得分：0)
此代码对我有用，可以更改笔触的颜色：
// 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');
}
}
});
答案 7 :(得分：0)
具有单个序列的条形图-使用return response($response)->header('Content-Type', 'text/plain');：
nth-child(N)