reactjs - react-chartjs-2 分组条形图

问题描述

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

与此类似：

但是我想出的唯一示例是堆叠的……我们有一个条形图，具有多个值。

我目前拥有的：

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]
              }
            ]
        }

但这给了我：

有没有办法可以进行分组而不是堆叠？

标签： reactjsreact-chartjs

reactjs - react-chartjs-2 分组条形图

问题描述

解决方案

推荐阅读