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 对象中，在 scales 键下，在每个轴下，您可以设置网格线的 z-index。根据 this.

，这组选项应该有效

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

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

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

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

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

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

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

React Chartjs 2 display axes above datasets backgroundColor

reactjs

chart.js

react-chartjs

react-chartjs-2