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

Posted 2023-02-16

【中文标题】如何更改圆环图中标签的位置？

【英文标题】：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 我无法得到预期的结果 :-(:-( 检查我更新的图像。

【参考方案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'