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

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

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

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

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

一样的颜色，只是浅了一点，但最重要的是你能看到网格线。

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

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