如何使用 react-chartjs-2 创建堆积条形图?
How to create stacked bar chart using react-chartjs-2?
我必须使用 react-chartjs-2 创建堆叠条形图。
options : {
maintainAspectRatio: false,
tooltips: {
mode: 'x-axis'
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}],
xAxes: [{
stacked: true
}]
}
}
Bar里的stacked好像不行
我正在使用 chartjs@2.4.0
const options = {
scales: {
xAxes: [{
stacked: true
}],
yAxes: [{
stacked: true
}]
}
}
let data ={
datasets:[{
label: 'test1',
data :[1]
},
{
label: 'test2',
data: [2]
}],
labels:['label']
}
render(){
return <Bar data={data} options={options} />
}
将 stack
选项添加到您的数据集。
相同的堆栈值堆叠在一起。
const arbitraryStackKey = "stack1";
const data = {
labels: ['a', 'b', 'c', 'd', 'e'],
datasets: [
// These two will be in the same stack.
{
stack: arbitraryStackKey,
label: 'data1',
data: [1, 2, 3, 4, 5]
},
{
stack: arbitraryStackKey,
label: 'data2',
data: [5, 4, 3, 2, 1]
}
]
}
我必须使用 react-chartjs-2 创建堆叠条形图。
options : {
maintainAspectRatio: false,
tooltips: {
mode: 'x-axis'
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}],
xAxes: [{
stacked: true
}]
}
}
Bar里的stacked好像不行
我正在使用 chartjs@2.4.0
const options = {
scales: {
xAxes: [{
stacked: true
}],
yAxes: [{
stacked: true
}]
}
}
let data ={
datasets:[{
label: 'test1',
data :[1]
},
{
label: 'test2',
data: [2]
}],
labels:['label']
}
render(){
return <Bar data={data} options={options} />
}
将 stack
选项添加到您的数据集。
相同的堆栈值堆叠在一起。
const arbitraryStackKey = "stack1";
const data = {
labels: ['a', 'b', 'c', 'd', 'e'],
datasets: [
// These two will be in the same stack.
{
stack: arbitraryStackKey,
label: 'data1',
data: [1, 2, 3, 4, 5]
},
{
stack: arbitraryStackKey,
label: 'data2',
data: [5, 4, 3, 2, 1]
}
]
}