嘿:)提前感谢您帮助我解决这个问题。
我在 ChartJs 中有一个水平图表,其中包含一些虚拟信息。我目前想将其与上面的统计数据对齐。在 ChartJs 中,图表在 <canvas>
内呈现。标签。我想删除图表中的间距。我假设这是填充,但它不在 Canvas 上,而是在图表本身内。我已经阅读了文档并尝试了一些选择。
只是一些额外的信息,我自定义了图表,现在看起来像这样:
- 删除了图例
- 翻转标签
- 更改了标签颜色
- 删除了网格线
HTML:
<canvas id="myChart" width="400" height="150"></canvas>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'horizontalBar',
data: {
labels: ['1', '2'],
datasets: [{
label: 'Money in',
data: [5, 19],
backgroundColor: [
'rgb(0,51,160)',
'rgb(26,121,191)'
],
borderWidth: 0
}]
},
options: {
scales: {
yAxes: [{
ticks: {
fontColor: 'white',
display: true,
position: top,
mirror: true,
beginAtZero: true,
fontSize: 17,
padding: -9,
z: 1
},
gridLines: {
display: false
}
}],
xAxes: [{
gridLines: {
display: false
},
ticks: {
beginAtZero: true,
display: false
}
}]
},
legend: {
display: false
}
}
});
最佳答案
您可以定义layout
负左填充如下:
options: {
layout: {
padding: {
left: -10
}
},
...
请查看以下代码片段,其中图表 Canvas 定义有边框,以强调与前面文本的对齐。
var myChart = new Chart(document.getElementById('myChart'), {
type: 'horizontalBar',
data: {
labels: ['1', '2'],
datasets: [{
label: 'Money in',
data: [5, 19],
backgroundColor: ['rgb(0,51,160)', 'rgb(26,121,191)'],
borderWidth: 0
}]
},
options: {
layout: {
padding: {
left: -10
}
},
scales: {
yAxes: [{
ticks: {
fontColor: 'white',
mirror: true,
beginAtZero: true,
fontSize: 17,
padding: -9,
z: 1
},
gridLines: {
display: false
}
}],
xAxes: [{
gridLines: {
display: false
},
ticks: {
beginAtZero: true,
display: false
}
}]
},
legend: {
display: false
}
}
});
canvas{
max-width: 300px;
border: 1px solid #000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script>
<p>Text here</p>
<canvas id="myChart" width="400" height="150"></canvas>
关于javascript - 从 ChartJs 水平条形图中删除填充,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60297443/