javascript - 使用 Chartist.js 为圆环图添加边框

Question

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

是否有为图表添加边框的插件选项？

我制作 donut 的方法非常简单:

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

当然，我们将不胜感激任何形式的帮助!

编辑:我也尝试过使用 cdcarson 的插件分支(Pull request pending at 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;
}