将一个居中的标签添加到圆环图表-js

时间:2016-02-14 13:24:26

标签: javascript html css chartist.js

由于我无法找到并回答这个问题,我希望这不是重复。我正在使用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
});

我已经尝试将图表本身设置为弹性框并将标签添加为子框并以此方式居中,但这不起作用,我尝试用新的div包围图表,但是让图表消失。 / p>

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

1 个答案:

答案 0 :(得分:1)

我会使用绘图事件将标签居中到图表的中间位置。检查此格档http://jsbin.com/hipafu/edit?html,css,js,output

还要注意风格:

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