javascript - Chartist - add text to center of donut chart

Question

I am trying to create a donut chart with text in the center. I need the donut chart to look like below:

The total value is a variable that I am passing to the function that creates the chart. As of now this is what I have:

Code for the above chart is below:

new Chartist.Pie('.ct-chart', {
            series: [{
                value: 10,
                className: 'pieChart1',
            }, {
                value: 6,
                className: 'pieChart2',
            }, {
                value: 5,
                className: 'pieChart3',
            }]
        }, {
            donut: true,
            donutWidth: 20,
            width: '138px',
            height: '138px',
            showLabel: false
        });

Can someone please help me create the text inside the donut?

Answer 1

它存在一个插件来做到这一点！ http://gionkunz.github.io/chartist-js/plugins.html#filldonut-plugin

实现这些依赖并将此代码添加到您的对象定义参数中：

plugins: [
            Chartist.plugins.fillDonut({
                items: [{
                    content: '<h3>160<span class="small">mph</span></h3>'
                }]
            })
        ],