ChartJs 堆积条形图
ChartJs Stacked Bar Chart
我有以下不同月份的数据
Jan : [1,5,3]
Feb : [10,5]
Mar : [4,8]
Apr : [7]
May : [3,1,5,0,7]
我想生成如下的条形图
现在,我有以下代码,我想知道如何生成如上图所示的条形图。
new Chart(document.getElementById("bar-chart"), {
type: 'bar',
data: {
labels: ['Jan','Feb','Mar','Apr','May'],
datasets: [{
data: [1,5,3],
label: 'Jan',
backgroundColor: "#3e95cd",
}
, {
data: [10,5],
label: 'Feb',
backgroundColor: "#8e5ea2",
}, {
data: [4,8],
label: 'Mar',
backgroundColor: "#4287f5",
}
, {
data: [7],
label: 'Apr',
backgroundColor: "#23ebbc",
}
, {
data: [3,1,5,0,7],
label: 'May',
backgroundColor: "#e63057",
}
]
},
options: {
title: {
display: true,
text: 'This is title'
},
backgroundColor:'#cfcfcf',
scales: {
xAxes: [{ stacked: true }],
yAxes: [{ stacked: true }]
}
}
});
谢谢
我只使用过一次 ChartJS,但根据您的需要来判断,我假设您创建了一个条形图并分别添加了这些数据集。例如,datasets:[{data:yourRedData}] 然后将其附加到图表中。
接缝好像他们确实有你想要的例子,https://www.chartjs.org/samples/latest/charts/bar/stacked.html
我检查了该示例的源代码,以便更好地了解他们是如何实现这些结果的,这就是我的发现。
var barChartData = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'Dataset 1',
backgroundColor: window.chartColors.red,
data: [
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor()
]
}, {
label: 'Dataset 2',
backgroundColor: window.chartColors.blue,
data: [
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor()
]
}, {
label: 'Dataset 3',
backgroundColor: window.chartColors.green,
data: [
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor()
]
}]
};
window.onload = function() {
var ctx = document.getElementById('canvas').getContext('2d');
window.myBar = new Chart(ctx, {
type: 'bar',
data: barChartData,
options: {
title: {
display: true,
text: 'Chart.js Bar Chart - Stacked'
},
tooltips: {
mode: 'index',
intersect: false
},
responsive: true,
scales: {
xAxes: [{
stacked: true,
}],
yAxes: [{
stacked: true
}]
}
}
});
};
第一个数据集是[10,10,8,7,3]
也就是红色,第二个是[5,5,8,0,1]
,第三个[3,0,0,0,5]
,第四个[0,0,0,0,7]
当然,您必须使用自己的技能来转换网络服务发送的数据。但这是您要寻找的最终结果。
我有以下不同月份的数据
Jan : [1,5,3]
Feb : [10,5]
Mar : [4,8]
Apr : [7]
May : [3,1,5,0,7]
我想生成如下的条形图
现在,我有以下代码,我想知道如何生成如上图所示的条形图。
new Chart(document.getElementById("bar-chart"), {
type: 'bar',
data: {
labels: ['Jan','Feb','Mar','Apr','May'],
datasets: [{
data: [1,5,3],
label: 'Jan',
backgroundColor: "#3e95cd",
}
, {
data: [10,5],
label: 'Feb',
backgroundColor: "#8e5ea2",
}, {
data: [4,8],
label: 'Mar',
backgroundColor: "#4287f5",
}
, {
data: [7],
label: 'Apr',
backgroundColor: "#23ebbc",
}
, {
data: [3,1,5,0,7],
label: 'May',
backgroundColor: "#e63057",
}
]
},
options: {
title: {
display: true,
text: 'This is title'
},
backgroundColor:'#cfcfcf',
scales: {
xAxes: [{ stacked: true }],
yAxes: [{ stacked: true }]
}
}
});
谢谢
我只使用过一次 ChartJS,但根据您的需要来判断,我假设您创建了一个条形图并分别添加了这些数据集。例如,datasets:[{data:yourRedData}] 然后将其附加到图表中。
接缝好像他们确实有你想要的例子,https://www.chartjs.org/samples/latest/charts/bar/stacked.html
我检查了该示例的源代码,以便更好地了解他们是如何实现这些结果的,这就是我的发现。
var barChartData = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'Dataset 1',
backgroundColor: window.chartColors.red,
data: [
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor()
]
}, {
label: 'Dataset 2',
backgroundColor: window.chartColors.blue,
data: [
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor()
]
}, {
label: 'Dataset 3',
backgroundColor: window.chartColors.green,
data: [
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor()
]
}]
};
window.onload = function() {
var ctx = document.getElementById('canvas').getContext('2d');
window.myBar = new Chart(ctx, {
type: 'bar',
data: barChartData,
options: {
title: {
display: true,
text: 'Chart.js Bar Chart - Stacked'
},
tooltips: {
mode: 'index',
intersect: false
},
responsive: true,
scales: {
xAxes: [{
stacked: true,
}],
yAxes: [{
stacked: true
}]
}
}
});
};
第一个数据集是[10,10,8,7,3]
也就是红色,第二个是[5,5,8,0,1]
,第三个[3,0,0,0,5]
,第四个[0,0,0,0,7]
当然,您必须使用自己的技能来转换网络服务发送的数据。但这是您要寻找的最终结果。