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"

}

Answer 2

您可以使用chartjs-plugin-datalabels来做到这一点：

useSelector

在此示例中，您将获得带有白色标签，并带有import Chart from 'chart.js' import ChartDataLabels from 'chartjs-plugin-datalabels' const myChart = new Chart(ctx, { plugins: [ChartDataLabels], options: { plugins: { datalabels: { color: '#ffffff', formatter: (value) => { return value + '%' } } } } })符号。

chart.js：甜甜圈图中的标签

2 个答案: