ChartJS 图表JS分层垂直条形图

olmpazwi 于 2022-11-07 发布在 Chart.js

关注(0)|答案(1)|浏览(220)

我在我的项目中使用react-chartjs-2。让我们以我给出的示例中的第一列为例。蓝色的值是50，绿色的值是20。在本例中，我的期望是绿色应该比蓝色低20，蓝色应该是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

chart.js

来源：https://stackoverflow.com/questions/72474744/chart-js-layered-vertical-bar-chart

1条答案

按热度按时间

r1zk6ea11#

使用当前配置，您可以让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",
      },
    ],
  }}
/>;

赞(0）回复(0）举报 2022-11-07

我来回答

ChartJS 图表JS分层垂直条形图

1条答案

相关问题

热门标签

最新问答