Chartjs Stacked条形图每个x值都有一个堆栈ID [英] Chartjs Stacked bar have a stack id per x value
本文介绍了Chartjs Stacked条形图每个x值都有一个堆栈ID的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想制作一个图表，其中差异数据集总是填补其他两个数据集之间的空白.但是我遇到的问题是，我可以为每个数据集设置堆栈ID，但不能为每个日期设置堆栈ID.我希望有另一种方法来实现我想要的.我希望它看起来像第二个数据集，但是由于将堆栈ID应用于整个数据集，差异数据集位于较高数据点的顶部.
I want to make a chart, where a difference dataset is always filling the blank between the two other datasets. But the problem I am having is, that I can set a stack id per dataset, but not per individual date. I am hoping there is another method to achieve what I want. I want it to look like the second dataset But due to the stack id applying to the whole dataset, the difference dataset is on top of the higher data point.
这是我的代码，其中包含已经用php插入的数据库的值，因此您有一些示例值:这是我的JavaScript部分:
Here is my code with the values of the database already inserted with php, so you have some example values: This is my JavaScript part:
function ConvertMinutes(num) {
d = Math.floor(num / 1440); // 60*24
h = Math.floor((num - (d * 1440)) / 60);
m = Math.round(num % 60);
if (d > 0) {
return (d + " Tage, " + h + " Stunden, " + m + " Minuten");
} else if (h > 0) {
return (h + " Stunden, " + m + " Minuten");
} else {
return (m + " Minuten");
}
}
var myChart = document.getElementById("myChart").getContext("2d");
var chart = new Chart(myChart, {
type: 'bar',
data: {
labels: ['2021-01-26', '2021-01-27', '2021-01-28', '2021-01-29', '2021-01-30', '2021-01-31', '2021-02-01', '2021-02-02', '2021-02-03', '2021-02-04', '2021-02-05', ],
datasets: [{
label: "Emil",
backgroundColor: 'rgb(255, 0, 0)',
data: [
716, 755, 1681, 890, 482, 494, 753, 364, 832, 889, 702,
],
stack: 2
}, {
label: "Luis",
backgroundColor: 'rgb(0, 0, 255)',
data: [
716, 974, 1006, 1133, 551, 638, 663, 288, 754, 0, 45,
],
stack: 1
}, {
label: "Differenz",
backgroundColor: 'rgb(0,255,0)',
data: [
0, 219, 675, 243, 69, 144, 90, 76, 78, 889, 657,
],
stack: 2,
}],
},
options: {
title: {
display: true,
text: 'Onlinezeit der letzten 10 Tage im Vergleich'
},
tooltips: {
mode: 'index',
intersect: false,
callbacks: {
label: function(t, d) {
var data1 = parseInt(d.datasets[0].data[t.index]);
var label1 = d.datasets[0].label;
var data2 = parseInt(d.datasets[1].data[t.index]);
var label2 = d.datasets[1].label;
var proz = 0.0;
if (data1 > data2) {
proz = Math.round(((data1 - data2) / data1) * 100, 2);
} else {
proz = Math.round(((data2 - data1) / data2) * 100, 2);
}
if (t.datasetIndex === 0) {
if (data1 >= data2) {
return label1 + ": " + ConvertMinutes(data1) + " (+" + proz + "%)";
} else {
return label1 + ": " + ConvertMinutes(data1) + " (-" + proz + "%)";
}
} else if (t.datasetIndex === 1) {
if (data2 >= data1) {
return label2 + ": " + ConvertMinutes(data2) + " (+" + proz + "%)";
} else {
return label2 + ": " + ConvertMinutes(data2) + " (-" + proz + "%)";
}
} else {
return d.datasets[t.datasetIndex].label + ": " + proz + "% (" + d.datasets[t.datasetIndex].data[t.index] + "min)";
}
},
/*labelTextColor:function(t, c){
console.log(t);
console.log(c.config.data.datasets[t.datasetIndex].data[t.index]);
}*/
}
},
responsive: true,
scales: {
yAxes: [{
ticks: {
//macht es so, dass der Graph bei 0 anfängt
beginAtZero: true,
//stepSize: 1,
callback: function(value, index, values) {
return value + " min";
}
//max: 4
},
//stacked: true
}]
},
}
});
这是我的html:
<!DOCTYPE html>
<html>
<head>
<title>Vergleich zwischen: <?php echo $userdata[$cldbids[0]]["name"] . " & " . $userdata[$cldbids[1]]["name"];?></title>
</head>
<body>
<div class="container b" style="width: 1200px; margin-left:auto; margin-right:auto;">
<canvas id="myChart"></canvas>
</div>
</body>
</html>
谢谢.
推荐答案
您可以对差异使用两个不同的数据集，如下面的修改代码所示.
You could use two distinct datasets for the differences as shown in your amended code below.
function ConvertMinutes(num) {
d = Math.floor(num / 1440); // 60*24
h = Math.floor((num - (d * 1440)) / 60);
m = Math.round(num % 60);
if (d > 0) {
return (d + " Tage, " + h + " Stunden, " + m + " Minuten");
} else if (h > 0) {
return (h + " Stunden, " + m + " Minuten");
} else {
return (m + " Minuten");
}
}
var myChart = document.getElementById("myChart").getContext("2d");
var chart = new Chart(myChart, {
type: 'bar',
data: {
labels: ['2021-01-26', '2021-01-27', '2021-01-28', '2021-01-29', '2021-01-30', '2021-01-31', '2021-02-01', '2021-02-02', '2021-02-03', '2021-02-04', '2021-02-05', ],
datasets: [{
label: "Emil",
backgroundColor: 'rgb(255, 0, 0)',
data: [
716, 755, 1681, 890, 482, 494, 753, 364, 832, 889, 702,
],
stack: 2
}, {
label: "Luis",
backgroundColor: 'rgb(0, 0, 255)',
data: [716, 974, 1006, 1133, 551, 638, 663, 288, 754, 0, 45],
stack: 1
}, {
label: "Differenz",
backgroundColor: 'rgb(0,255,0)',
data: [0, 219, 0, 243, 69, 144, 0, 0, 0, 0, 0],
stack: 2,
},
{
label: "Differenz",
backgroundColor: 'rgb(0,255,0)',
data: [0, 0, 675, 0, 0, 0, 90, 76, 78, 889, 657],
stack: 1,
}
],
},
options: {
title: {
display: true,
text: 'Onlinezeit der letzten 10 Tage im Vergleich'
},
legend: {
labels: {
filter: legendItem => legendItem.datasetIndex < 3
}
},
tooltips: {
mode: 'index',
intersect: false,
callbacks: {
label: function(t, d) {
var data1 = parseInt(d.datasets[0].data[t.index]);
var label1 = d.datasets[0].label;
var data2 = parseInt(d.datasets[1].data[t.index]);
var label2 = d.datasets[1].label;
var proz = 0.0;
var min = 0;
if (data1 > data2) {
proz = Math.round(((data1 - data2) / data1) * 100, 2);
min = data1 - data2;
} else {
proz = Math.round(((data2 - data1) / data2) * 100, 2);
min = data2 - data1;
}
if (t.datasetIndex === 0) {
if (data1 >= data2) {
return label1 + ": " + ConvertMinutes(data1) + " (+" + proz + "%)";
} else {
return label1 + ": " + ConvertMinutes(data1) + " (-" + proz + "%)";
}
} else if (t.datasetIndex === 1) {
if (data2 >= data1) {
return label2 + ": " + ConvertMinutes(data2) + " (+" + proz + "%)";
} else {
return label2 + ": " + ConvertMinutes(data2) + " (-" + proz + "%)";
}
} else if (t.datasetIndex === 2 && data1 < data2) {
return undefined;
} else if (t.datasetIndex === 3 && data1 >= data2) {
return undefined;
} else {
return d.datasets[t.datasetIndex].label + ": " + proz + "% (" + min + "min)";
}
}
}
},
responsive: true,
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
callback: function(value, index, values) {
return value + " min";
}
},
}]
},
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="myChart" height="120"></canvas>这篇关于Chartjs Stacked条形图每个x值都有一个堆栈ID的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
