将一个居中标签添加到甜甜圈 chartist-js

Question

由于我找不到和回答这个问题，我希望它不是重复的。我正在使用 chartist.js，我做了一个简单的甜甜圈，这非常简单直接，但现在我想禁用标签，它工作正常并在甜甜圈内添加一个标签（这是问题）。不需要，标签会变大，通过图表本身，如果它只是一个新的 div 或其他东西就足够了。

到目前为止我的代码：

<div class="ct-chart1 ct-chart ct-perfect-fourth"></div>

和

new Chartist.Pie('.ct-chart1', {
    labels: [],
    series: [75, 25]
}, {
    donut: true,
    width: '300px',
    height: '200px',
    donutWidth: 30,
    startAngle: 0,
    total: 100
});

我已经尝试使图表本身成为一个 flexbox，并将标签添加为子标签并以这种方式居中，但这没有用，我尝试用新的 div 包围图表，但是让图表消失。

<div>
    <div class="ct-chart1 ct-chart ct-perfect-fourth"></div>
</div>

Answer 1

我会使用绘图事件将标签居中放置在图表的中间。检查此垃圾桶 http://jsbin.com/hipafu/edit?html,css,js,output

还要注意样式：

.ct-label {
  dominant-baseline: central;
  text-anchor: middle;
}

将一个居中标签添加到甜甜圈 chartist-js

Add one centered label to a donut chartist-js

html

javascript

css

chartist.js