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

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

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

\n\n

\xea\x9c\xb0\xc9\xaa\xca\x80\xea\x9c\xb1\xe1\xb4\x9b

\n\n

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

\n\n

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

\n\n

\xea\x9c\xb1\xe1\xb4\x87\xe1\xb4\x84\xe1\xb4\x8f\xc9\xb4\xe1\xb4\x85

\n\n

用 div 元素( .chart-container)包裹画布并设置它\xc2\xad的宽度和高度，而不是为画布元素本身设置它：

\n\n

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

\n\n

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

\n\n

这是一个工作示例。

\n

Answer 2

最新版本的 Chart.js 语法略有不同，需要包装在plugins

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