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

Posted

技术标签:

【中文标题】如何更改圆环图中标签的位置?【英文标题】: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'
      
   

   

【讨论】:

以上是关于如何更改圆环图中标签的位置?的主要内容,如果未能解决你的问题,请参考以下文章

在颤动中突出显示圆环图中的最高值弧

如何使用 Chart.js 在圆环图中添加文本?

带有居中悬停标签的 JavaScript 圆环图

D3Js 圆环图,避免标签文本覆盖

Kendo UI 将圆环图的系列标签颜色更改为系列颜色

在图例圆环图的 onHover 期间更快地加载 Tooltip