使用 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 的插件分支（Pull request pending at https://github.com/gionkunz/chartist-js/pull/330）来使用填充形状而不是笔画生成图表，但似乎有些东西被破坏了

Answer 1

我 "solved" 它使用饼图而不是圆环图，并向形状添加笔触。之后我创建了一个函数来为填充添加一个封面：

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

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

Add border to doughnut chart with Chartist.js

javascript

css

charts

svg

chartist.js