chart.js : 圆环图中的标签

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：

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 + '%'
        }
      }
    }
  }
})

在此示例中，您将获得带有 % 符号的白色标签。