Chart.js y轴标签被截断
我有一个引导模式,其中有一个chart.js 问题是左侧Y轴值被截断 这是检查器中的HTML:Chart.js y轴标签被截断,chart.js,Chart.js,我有一个引导模式,其中有一个chart.js 问题是左侧Y轴值被截断 这是检查器中的HTML: <div class="modal-dialog modal-center"> <div class="modal-content"> <div class="modal-header" style="background-color:#62a8ea;"> <
<div class="modal-dialog modal-center">
<div class="modal-content">
<div class="modal-header" style="background-color:#62a8ea;">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" style="color:white;">Reading Details</h4>
</div>
<div class="modal-body" style="height: 400px;"><div><div class="chartjs-size-monitor" style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: hidden; pointer-events: none; visibility: hidden; z-index: -1;"><div class="chartjs-size-monitor-expand" style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;"><div style="position:absolute;width:1000000px;height:1000000px;left:0;top:0"></div></div><div class="chartjs-size-monitor-shrink" style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;"><div style="position:absolute;width:200%;height:200%;left:0; top:0"></div></div></div>
<canvas id="detail-chart" width="560" height="280" class="chartjs-render-monitor" style="display: block; width: 560px; height: 280px;"></canvas>
</div>
</div>
<div class="modal-footer">
</div>
</div>
</div>
×
阅读细节
有线索吗
只需添加以下内容:
options: {
layout: {
padding: {
// Any unspecified dimensions are assumed to be 0
left: 10,
bottom: 5
}
},
这将解决问题。只需添加以下内容:
options: {
layout: {
padding: {
// Any unspecified dimensions are assumed to be 0
left: 10,
bottom: 5
}
},
这将解决问题。只需复制并粘贴以下选项即可解决问题,还可以通过删除或添加属性进行自定义
lineGraphOption: ChartOptions = {
responsive: true,
maintainAspectRatio: false,
elements: {
point:
{
radius: 0,
},
},
tooltips: {
mode: 'index'
},
layout: {
padding: {
top: 50,
right: 10,
bottom: 50,
left: 10,
}
},
legend: {
position: "bottom",
display: true,
onClick: (() => {
}),
align: "center",
labels: {
boxWidth: 12,
padding: 30
},
},
scales: {
xAxes: [{
type: 'time',
time: {
unit: 'day',
minUnit: 'month',
unitStepSize: 4,
displayFormats: {
'month': 'MMM DD',
}
},
ticks: {
max: '31 Oct',
}
}],
yAxes: [{
ticks: {
callback: function (value) {
return value + ' K'
}
},
}]
},
plugins: {
}
}
只需复制并粘贴以下选项,即可解决问题,还可以通过删除或添加属性进行自定义
lineGraphOption: ChartOptions = {
responsive: true,
maintainAspectRatio: false,
elements: {
point:
{
radius: 0,
},
},
tooltips: {
mode: 'index'
},
layout: {
padding: {
top: 50,
right: 10,
bottom: 50,
left: 10,
}
},
legend: {
position: "bottom",
display: true,
onClick: (() => {
}),
align: "center",
labels: {
boxWidth: 12,
padding: 30
},
},
scales: {
xAxes: [{
type: 'time',
time: {
unit: 'day',
minUnit: 'month',
unitStepSize: 4,
displayFormats: {
'month': 'MMM DD',
}
},
ticks: {
max: '31 Oct',
}
}],
yAxes: [{
ticks: {
callback: function (value) {
return value + ' K'
}
},
}]
},
plugins: {
}
}
嗨,瓦阿。你的解决方案似乎没有帮助。您的解决方案只会将图形向左移动10px。我们希望在可用空间内管理标签。假设y轴的宽度为50px.Hi@VAAA。你的解决方案似乎没有帮助。您的解决方案只会将图形向左移动10px。我们希望在可用空间内管理标签。假设y轴的宽度为50px。