在此处输入图像描述
grafico(({const bgColor={id:'bgColor'，beforeDraw:(图表、步骤、选项(=>{const｛ctx，width，height｝=图表；ctx.fillStyle='white'；ctx.fillRect(0，0，宽度，高度(；ctx.restore((；}，}；const ctx=document.getElementById('myChart'(；新图表(ctx{类型："bar"，选项：{响应：true，maintainAspectRatio：false，刻度：｛
yAxes: [
{
beginAtZero:true,
ticks: {
callback(value, index) {
return 'R$' + value;
},
},
},
],
xAxes: [{}],
},
legend: {
display: false,
},
},
plugins: [bgColor],
data: {
labels: this.dateChartFormated,
datasets: [
{
type: 'line',
label: 'R$',
data: this.finalBalanceChart,
backgroundColor: 'rgb(0,53,132)',
borderColor: 'rgb(0,53,132)',
lineTension: 0,
fill: false,
},
{
type: 'bar',
label: 'R$',
data: this.receivedAmounts,
backgroundColor: 'rgb(37,126,37)',
fill: false,
},
{
type: 'bar',
label: 'R$',
backgroundColor: 'rgb(233,64,64)',
borderColor: 'rgb(233,64,64)',
borderWidth: 1,
data: this.paymentAmounts,
fill: false,
},
],
},
});
}
这就是图表的工作方式以及数据的正确表示方式。但是，如果希望所有条形图都更加可见，则可以使用minBarLength选项。这样可以确保条形图至少有那么多像素高。
这可以在数据集级别上进行配置，因此在yAxes的选项中，只有该数据集的条形图那么高或在图表级别上，尽管图表级别的选项已被弃用，并且在V3中不再适用：
const options = {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [1200, 19, 3, 5, 2, 3],
backgroundColor: 'pink'
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
backgroundColor: 'orange',
minBarLength: 100, // Set the min bar length on a dataset level so only the orange bars will be at least 100 pixels high
}
]
},
options: {
scales: {
yAxes: [{
minBarLength: 100, // Set the min bar length on a chart level so all bars will be at least 100 pixels high
}]
}
}
}
const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
</body>