使用 react-chartjs-2 的分组条形图
Grouped bar chart with 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]
}
]
}
但这给了我:
有什么方法可以进行分组而不是堆叠?
试试这个
- 从选项中删除
scales
- 从数据集中删除
stack: 1
Link 在 codesandbox
中编码
我需要在条形图中显示一个月的多个值。
与此类似:
但我想出的唯一例子是堆叠...我们有一个条形图,有多个值。
我目前拥有的:
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]
}
]
}
但这给了我:
有什么方法可以进行分组而不是堆叠?
试试这个
- 从选项中删除
scales
- 从数据集中删除
stack: 1
Link 在 codesandbox
中编码