0

我正在使用 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处等待拉取请求）使用填充形状而不是笔划来生成图表，但似乎有些东西被打破

4

1 回答 1

0

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

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;
}
于 2015-07-28T22:16:19.627 回答