Question

我正在使用Chartist.js来创建一些圆环图。到目前为止，它非常直接且易于使用，但我一直试图在过去三个小时内围绕形状创建边框（不用说我无法使用SVG笔划属性，因为插件本身使用笔划来创建甜甜圈效果。）

是否有in-plugin选项为图表提供边框？

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

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

I "solved" it using a pie chart instead of a doughnut one, and adding strokes to the shapes. After that I created a function to append a cover for the fill:

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

The parent of the chart must have set

position: relative;

And the CSS for the cover of the fill looks like this:

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

使用Chartist.js添加边框到圆环图

1 个答案: