用Chartist.js将边框添加到甜甜圈图中

Question

我使用Chartist.js来创建一些甜甜圈图表。到目前为止，它非常简单易用，但在过去的三个小时里，我一直试图在形状周围创建一个边框(不用说，我无法使用SVG笔画属性，因为插件本身使用笔画来创建甜甜圈效果)。

有插件选项给图表一个边框吗？

我制作甜甜圈的方法非常简单：

new Chartist.Pie('.donut-chart', {
  series: [37.47, 62.53],
}, {
  donut: true,
  donutWidth: 8,
  startAngle: 0,
  total: 100,
  showLabel: false
});

当然，任何帮助都将是非常感谢的！

编辑:我也尝试使用插件的cdcarson分叉(拉请求挂在https://github.com/gionkunz/chartist-js/pull/330上)来生成图表，使用填充的形状而不是笔画，但是有些东西似乎被打破了。

Answer 1

我“解决”了它使用饼图而不是甜甜圈，并增加了笔画的形状。之后，我创建了一个函数来为填充添加一个封面：

function hideFillOfPie() {
  $('.donut-chart').append('<div class="cover-fill"></div>');
  var size = $('.donut-chart-holder').width();
  $('.cover-fill').css({
    'height' : size - 30 + 'px',
    'width'  : size - 30 + 'px'
  });
}

$(document).ready(function() {
  hideFillOfPie();
});

图表的父级必须已设置

position: relative;

填充封面的CSS如下所示：

.cover-fill {
  position: absolute;
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  background-color: white;
  border-radius: 50%;
  -webkit-transform: translate3d(-50%,-50%,0);
          transform: translate3d(-50%,-50%,0);
  z-index: 1;
}