如何更改圆环图中标签的位置?
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'
【讨论】:
以上是关于如何更改圆环图中标签的位置?的主要内容,如果未能解决你的问题,请参考以下文章