我有一个图表,我几乎看不到"活动"列,我想知道是否可以为某个数据集定义默认的Y轴?
我想改进图表的可见性/用户界面.对如何做这件事有什么建议吗?
下面的例子也可以在JSFiddle中看到.
const ctx = document.getElementById('my-chart').getContext('2d');
new Chart(ctx,
{
type: 'bar',
data:
{
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
datasets:
[
{
label: 'Activities',
backgroundColor: '#000',
data: [5, 33, 24, 6, 14, 5, 8, 10, 5, 4, 0, 0],
},
{
label: 'Grand total',
backgroundColor: '#eb4034',
data: [0, 300.96, 482.98, 153.75, 463.71, 70.36, 3025.80, 1142.00, 2266.89, 1660.50, 0, 0],
},
]
},
options:
{
responsive: true,
maintainAspectRatio: false,
elements:
{
line:
{
tension: 0.4,
borderJoinStyle: 'round',
}
},
tooltips:
{
mode: 'index',
intersect: false,
},
hover:
{
mode: 'nearest',
intersect: true
},
scales:
{
xAxes:
[
{
gridLines:
{
display: false
},
}
],
yAxes:
[
{
gridLines:
{
display: true,
color: '#d9dffa',
drawBorder: false,
offsetGridLines: false,
drawTicks: false,
borderDash: [3,5],
zeroLineWidth: 1,
zeroLineColor: '#d9dffa',
zeroLineBorderDash: [3,4]
}
}
]
},
legend:
{
display: false,
}
},
});
<body>
<canvas id="my-chart"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.0/chart.js"></script>
</body>