[英]ChartJS - How to increase the maximum degree of label rotation on x-axis?
我有一个折线图,起初,x 轴上的所有标签都是完全水平的。 像这样的东西:
现在如果添加更多数据,标签开始旋转:
直到它似乎达到了它可以旋转的最大程度:
从表面上看,我认为最大度数是 45。所以现在,如果我添加更多数据,而不是更多地旋转标签,它会删除两个标签中的每一个,并变成这样:
如何将此度数增加到 90,以便标签旋转尽可能多地完全垂直?
这是我用于图表的代码:
new Chart(chart, {
type: 'line',
data: chart_data,
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: false
}
}]
},
legend: {
position: 'top',
labels: {
boxWidth: 5,
usePointStyle: true
}
},
events: ['click', 'mousemove'],
onClick: clicked,
pan: {
enabled: true,
mode: 'x',
onPanComplete: function(event) {
console.log(event)
}
},
zoom: {
enabled: true,
mode: 'x'
}
}
});
您可以使用常用tick
配置 object的maxRotation
属性进行配置。
您的代码需要像这样修改:
options: {
scales: {
xAxes: [{
ticks: {
maxRotation: 90
}
}],
yAxes: [{
...
我认为问题的关键字不是旋转,而是 xAxes 上的Tick 。 我认为这个链接可以帮助你:
https://www.chartjs.org/docs/latest/axes/styling.html#tick-configuration
还
Chart.js:使用 maxTicksLimit 时均匀分布刻度
xAxes: [{
ticks: {
autoSkip: false, // Skip or not?
maxTicksLimit: 30 // How much?
}
}]
正如@timclutton 所说,轮换会有所帮助: https://stackoverflow.com/a/58275468/7514010
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.