React Chartjs 2在数据集backgroundColor上方显示轴

Question

我有一个带有Chart.js的折线图，其中一行必须填充由另一行分隔的背景。它工作得很好，但当背景被填充时，我如何才能看到图表轴？？

以下是我目前拥有的一个示例：codeSandBox

Answer 1

在玩它的过程中，您的大多数选项根本无法识别。

我玩了颜色、布局、展示等等，但没有什么不同。唯一有区别的是responsive密钥。

通常，更改线条显示方式的方式如下：

const options = {
legend: { display: false },
title: { display: true, text: "Line Chart" },
scales: {
yAxes: [{
gridLines: {
z: 99
},
ticks: {
beginAtZero: true
}
}]
},
xAxes: [{
gridLines: {
z: 99
}
}],
responsive: true
};

在options对象中，在每个轴的比例键下，可以设置网格线的z索引。根据这一点，这套选项应该有效。

然而，因为你的选择没有得到认可，所以这里的选择一开始都没有生效。

我还没有在react中使用过Chart.js，所以在这方面我真的帮不了你更多。

然而，我可以说的是，在沙箱中的示例代码的第10行中，我将十六进制值更改为rgba：backgroundColor: "rgba(235, 245, 251, 0.5)",

它是相同的颜色，只是稍微浅一点，但最重要的是你可以看到网格线。

https://i.stack.imgur.com/VQ7v3.png

我的建议是，如果你只在这个图表中使用React，不要。这似乎让事情变得更难了。