javascript - 使用Chartist.js，如何更改甜甜圈图的笔触颜色？

您好，我正在尝试使用Chartist.js创建以下甜甜圈图:

GOAL CHART

这是当前图表的外观:

Chartist.js Donut Chart

我正在尝试查找可以在何处或如何更改此图表的颜色以匹配第一张甜甜圈图表。红色和粉红色似乎是默认设置。我还找不到任何有关如何实现此目标的文档。我还想自定义笔触的大小和图表本身的大小。任何帮助是极大的赞赏!

当前代码:

// ** 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>

最佳答案

所以我想通了...

我不得不进入CSS并覆盖默认值。我必须确保在Chartist的CDN之后加载css文件。然后只需设置ct图表的宽度和高度即可。

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

关于javascript - 使用Chartist.js，如何更改甜甜圈图的笔触颜色？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35402143/