javascript - 图表.js : Label inside doughnut chart

Question

我正在尝试使用 Chart.js 在圆环图上显示图表信息(以 % 为单位)。在此图表中，我需要显示％值的每个部分始终包含两个部分。这是我的代码

       var ctx = document.getElementById("databaseAdded").getContext("2d"),
           myChart = new Chart(ctx, {
                 type: 'doughnut',
                 data: {
                datasets: [{
                data: [$scope.graphData.databaseAdded.syspercent, 
                $scope.graphData.databaseAdded.apppercent],
                backgroundColor: [
                     '#d0b000',
                     '#bb112e'
                ],
                borderColor: [
                     '#d0b000',
                     '#bb112e'
                ],
                borderWidth: 1
                }]
            },
               options: {
                   showDatasetLabels : true,
                   cutoutPercentage: 41,
                   legend: {
                            display: true, 
                            position:'bottom',
                            labels: {
                              fontFamily: "myriadpro-regular",
                              boxWidth: 15,
                              boxHeight: 2,
                            },
                        } 
                    }
                });

还有一点是图例信息不同，标签信息不同。我可以获得图例，但我在获取标签信息时遇到问题。下面我上传了标签外观的图像。请看一下。

谢谢你所做的一切!

Answer 1

您可以使用库“Chart PieceLabel”。

添加脚本后，您可能应该添加另一个选项:“pieceLabel”。

定义您喜欢的方式。

pieceLabel: {
// mode 'label', 'value' or 'percentage', default is 'percentage'
mode: (!mode) ? 'value' : mode,


// precision for percentage, default is 0
precision: 0,

// font size, default is defaultFontSize
fontSize: 18,

// font color, default is '#fff'
fontColor: '#fff',

// font style, default is defaultFontStyle
fontStyle: 'bold',

// font family, default is defaultFontFamily
fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"

}