Chart JS分层竖条图

Question

我在我的项目中使用了 react-chartjs-2。让我们以我给出的示例中的第一列为例。 blue的值为50，green的值为20。这种情况下，我的预期是green应该比blue低20，blue应该是50。但是chartjs计算50+20，上去是70。有没有在 chartjs 中对此进行配置？

        <Bar
            options={{
                plugins: {
                    legend: {
                        display: false,
                    },
                },
                responsive: true,
                scales: {
                    x: {
                        stacked: true,
                        grid: {
                            display: false,
                        },
                        ticks: {
                            font: { size: 12 },
                        },
                    },
                    y: {
                        stacked: true,
                        grid: {
                            borderDash: [2, 2],
                            color: '#e8e8e8',
                        },
                        ticks: {
                            font: { size: 12 },
                            count: 3,
                        },
                    },
                },
            }}
            data={{
                labels: week.map(day => day.format('MMM D')),
                datasets: [
                    {
                        label: 'Test 3',
                        data: [50, 50, 50, 50, 50],
                        backgroundColor: 'blue',
                        stack: 'Stack 0',
                    },
                    {
                        label: 'Test 4',
                        data: [20, 24, 60, 90, 50],
                        backgroundColor: 'green',
                        stack: 'Stack 0',
                    },
                ],
            }}
        />

screenshot

Answer 1

使用您当前的配置，您告诉 chart.js 堆叠 x 轴和 y 轴。

通过堆叠 x 轴，它会将所有条形图移动到一列，而不是彼此相邻，并且通过堆叠 y 轴，它将所有条形图移动到彼此上方。

因此，为了实现您想要的行为，您需要在 y 轴配置中将 stacked 设置为 false（或者完全删除它）：

<Bar
  options={{
    plugins: {
      legend: {
        display: false,
      },
    },
    responsive: true,
    scales: {
      x: {
        stacked: true,
        grid: {
          display: false,
        },
        ticks: {
          font: { size: 12 },
        },
      },
      y: {
        grid: {
          borderDash: [2, 2],
          color: "#e8e8e8",
        },
        ticks: {
          font: { size: 12 },
          count: 3,
        },
      },
    },
  }}
  data={{
    labels: week.map((day) => day.format("MMM D")),
    datasets: [
      {
        label: "Test 3",
        data: [50, 50, 50, 50, 50],
        backgroundColor: "blue",
        stack: "Stack 0",
      },
      {
        label: "Test 4",
        data: [20, 24, 60, 90, 50],
        backgroundColor: "green",
        stack: "Stack 0",
      },
    ],
  }}
/>;

Chart JS分层竖条图

Chart JS Layered Vertical Bar Chart

chart.js

react-chartjs

react-chartjs-2