jquery - 如何更改圆环图中标签的位置？

Question

我创建了一个圆环图。

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],
            }]
            },
            options: {
              tooltips: { bodyFontSize: 25 }
            }
            });

这里我想在垂直位置显示图表右侧的标签。
如何做？

完整代码:https://jsfiddle.net/axoy2Ljt/

Answer 1

为了得到你预期的结果......

ꜰɪʀꜱᴛ

在图表选项中为 legend 设置 position: 'right' :

options: {
   legend: {
      position: 'right'
   }
}

ꜱᴇᴄᴏɴᴅ

用 div 元素包裹 Canvas (.chart-container) 并设置它的宽度和高度，而不是设置它对于 Canvas 元素本身:

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

此外，您应该使用最新版本的 Chart.js，即 2.7.1 atm。

这是一个working example .