Question

我需要在条形图中显示一个月的多个值。

与此类似：

但是我要提出的唯一示例是堆叠的...在这里，我们有一个带有多个值的条形图。

我现在有什么：

render() {
        const options={
            responsive: true,
            legend: {
                display: false,
            },
            type:'bar',
            scales: {
                xAxes: [{
                    stacked: true
                }],
                yAxes: [{
                    stacked: true
                }]
            }
        }
        return (
            <Bar
                data={this.props.data}
                width={null}
                height={null}
                options={options}
            />
        )

数据是：

data: {
            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
            datasets: [
              {
                label: 'My First dataset',
                backgroundColor: 'rgba(255,99,132,0.2)',
                borderColor: 'rgba(255,99,132,1)',
                borderWidth: 1,
                stack: 1,
                hoverBackgroundColor: 'rgba(255,99,132,0.4)',
                hoverBorderColor: 'rgba(255,99,132,1)',
                data: [65, 59, 80, 81, 56, 55, 40]
              },
              {
                label: 'My second dataset',
                backgroundColor: 'rgba(155,231,91,0.2)',
                borderColor: 'rgba(255,99,132,1)',
                borderWidth: 1,
                stack: 1,
                hoverBackgroundColor: 'rgba(255,99,132,0.4)',
                hoverBorderColor: 'rgba(255,99,132,1)',
                data: [45, 79, 10, 41, 16, 85, 20]
              }
            ]
        }

但这给了我

有没有一种方法可以进行分组而不是堆叠？

Answer 1

尝试一下

从选项中删除None
从数据集中删除scales

链接到codesandbox中的代码

使用react-chartjs-2分组的条形图

1 个答案: