chartJs 中折线图下方区域的背景颜色？

Question

我正在创建图表以使用图表 js 呈现一些数据。

  const data = {
    labels: ["1 Dec", "8 Dec", "16 Dec", "31 Dec"],
    datasets: [
      {
        label: "Sales Made",
        data: [3, 7, 4, 5],
        borderColor: ["#03A9F5"],
      },
    ],
  };
  const options = {
    tension: 0.4,
    title: {
      display: true,
      text: "linechrt",
    },
    scales: {
      y: [
        {
          display: true,
          stacked: true,
          ticks: {
            beginAtZero: true,
            steps: 10,
            stepValue: 5,
            min: 0,
            max: 100,
          },
        },
      ],
    },
  };

现在我查看了在线教程甚至文档，但我没有得到关于如何绘制线下区域的明确答案。ChartJs 有很多这个问题的版本和以前的答案尤其是在 Stack 上似乎不起作用。

对于条码等其他图表

backGroundColor: ["red"]

在数据集对象上工作正常，但如果我尝试对折线图执行相同的操作，则不会。顶端您单击以隐藏或显示图表的标签图标似乎是唯一一个响应背景颜色变化的图标。线以下的区域没有。 请帮忙

<Line data={data} options={options} />

Answer 1

您需要在数据集中将 fill 设置为 true。根据您是否使用 treeshaking，您还需要从 chart.js.

导入并注册 filler

  const data = {
    labels: ["1 Dec", "8 Dec", "16 Dec", "31 Dec"],
    datasets: [
      {
        label: "Sales Made",
        data: [3, 7, 4, 5],
        borderColor: ["#03A9F5"],
        fill: true,
        backgroundColor: 'pink'
      },
    ],
  };

chartJs 中折线图下方区域的背景颜色？

Background-color for area below line chart in chartJs?

javascript

reactjs

chart.js

react-chartjs