Chartjs 在右侧图例上添加数据值答案

【问题标题】：Chartjs adding data values on the right legendChartjs 在右侧图例上添加数据值
【发布时间】：2022-12-19 22:58:15
【问题描述】：

考虑以下示例：

$(document).ready(function() {
   var ctx = document.getElementById('mycanvas').getContext('2d');
   var chart = new Chart(ctx, {
      type: 'doughnut',
      data: {
         labels: ["CL", "ML", "Spl.L", "PD", "Other Permissions"],
         datasets: [{
            label: "My First dataset",
            backgroundColor: ['#F0CB8C', '#EE97A1', '#A9D5D4', '#E8A3D7', '#CFA3FD'],
            data: [7, 3, 3, 4, 8],
         }]
      },
      options: {
         legend: {
            position: 'right'
         }
      }
   });
})

example

有没有办法让数据位于单个标签的右侧？像这儿：

【问题讨论】：

标签： javascript jquery charts

【解决方案1】：

您可以按照@LeeLenalee 的建议添加自定义标签

[@LeeLenalee Solution][1]

这是您的工作代码：

$(document).ready(function() {
   var ctx = document.getElementById('mycanvas').getContext('2d');
   var chart = new Chart(ctx, {
      type: 'doughnut',
      data: {
         labels: ["CL", "ML", "Spl.L", "PD", "Other Permissions"],
         datasets: [{
            label: "My First dataset",
            backgroundColor: ['#F0CB8C', '#EE97A1', '#A9D5D4', '#E8A3D7', '#CFA3FD'],
            data: [7, 3, 3, 4, 8],
         }]
      },
      options: {
         legend: {
        labels: {
          generateLabels: (chart) => {
            const datasets = chart.data.datasets;
            return datasets[0].data.map((data, i) => ({
              text: `${chart.data.labels[i]} ${data}`,
              fillStyle: datasets[0].backgroundColor[i],
            }))}
         }
       }
      }
   });
})

.chart-container {
   width: 280px;
   height: 280px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<div class="chart-container">
   <canvas id="mycanvas"></canvas>
</div>

【讨论】：