使用Chartist.js如何更改圆环图的笔画颜色？

Question

您好我想使用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:

<div class="ct-chart ct-perfect-fourth"></div>

Answer 1

所以我想通了......

我不得不进入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
});

Answer 2

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;
}

Answer 3

稍后,您可以为数据系列提供类名,以便您可以单独更改每个图上的颜色:

来自文档:

series属性也可以是包含value属性和className属性的值对象数组,以覆盖系列组的CSS类名.

代替:

series: [70, 30]

做这个:

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

然后你可以用你喜欢的strokecss属性来设计风格