React Chartjs 2 在数据集背景颜色上方显示轴

如何解决React Chartjs 2 在数据集背景颜色上方显示轴

我有一个带有 chart.js 的折线图，其中一行必须填充以另一行分隔的背景。它运行良好，但是当背景被填充时，我如何才能看到图表轴？？

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

解决方法

玩弄它后，您的大部分选项都没有被识别。

我尝试了颜色、布局、显示内容等，但没有任何区别。唯一不同的是 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 对象中，在 scales 键下，在每个轴下，您可以设置网格线的 z-index。根据{{​​3}}，这组选项应该有效。

但是，由于您的选项没有被识别，这里的选项甚至都没有首先生效。

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

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

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

this

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