React Chartjs 2显示数据集上方的轴背景颜色答案

【问题标题】：React Chartjs 2 display axes above datasets backgroundColorReact Chartjs 2显示数据集上方的轴背景颜色
【发布时间】：2021-05-09 05:35:17
【问题描述】：

我有一个带有 chart.js 的折线图，其中一条线必须填充用另一条线分隔的背景。效果很好，但是如何在填充背景时查看图表轴？？

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

【问题讨论】：

标签： reactjs chart.js react-chartjs react-chartjs-2

【解决方案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 对象中，在 scales 键下，在每个轴下，您可以设置网格线的 z-index。根据this，这组选项应该可以工作。

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

我没有在 react 中使用 Chart.js，所以在这方面我真的无法为您提供更多帮助。

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

都是一样的颜色，只是淡了一点，最重要的是可以看到网格线。

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

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

【讨论】：

它适用于gridLines: { z: 99 }。无法识别这些选项，因为我在我的 Web 应用程序中使用的是 chartjs v2.9，但在代码和框示例中它具有 chartjs v3。现在更新了。