使用Chartist.js向甜甜圈圖添加邊框

Question

我使用Chartist.js來創建一些甜甜圈圖。 到目前為止，它非常簡單易用，但是最近三個小時我一直在嘗試在形狀周圍創建邊框（不必說我無法使用SVG stroke屬性，因為插件本身使用了stroke）創建甜甜圈效果）。

是否有插件選項可以為圖表添加邊框？

我創建甜甜圈的方式非常簡單：

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