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

【问题标题】：How to change position of labels in Doughnut chart?如何更改圆环图中标签的位置？
【发布时间】：2018-04-13 11:43:36
【问题描述】：

我已经创建了一个圆环图。

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/

【问题讨论】：

您是否尝试使用 legend position 。 Chart.defaults.global.legend.position ='right;'
@agit 我尝试过添加这样的选项：{ tooltips: { bodyFontSize: 25 }, legend:{ display:'right' } }，它不起作用。
这对你有用吗？：https://jsfiddle.net/30ngcpsz/1/
@agit 感谢 man.but 我无法得到预期的结果 :-(:-( 检查我更新的图像。

标签： jquery css twitter-bootstrap chart.js legend

【解决方案1】：

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

ꜰɪʀꜱᴛ

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

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

ꜱᴇᴄᴏɴᴅ

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

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

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

这是working example。

【讨论】：

还有一个帮助。你能告诉我如何更改标签框的大小;-) ;-0
为标签相应地设置 boxWidth 属性。请参阅 - jsfiddle.net/xm80qzoo/1
从 3.6.0 开始（可能更早）已经过时了，请参阅下面的答案

【解决方案2】：

最新版chart.js语法略有不同，需要用plugins包裹

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

【讨论】：