#chart.js
Вопрос:
Я новичок в ChartJS и в настоящее время пытаюсь перейти на него из старой реализации CANVASJ моего графика. Я зашел довольно далеко, но получаю очень странные результаты, которые больше не могу объяснить.
Вот две картинки о том, каким он должен быть (вверху: CanvasJS) и что он показывает сейчас (внизу: ChartJS).
И вот мой код и массив данных на данный момент:
let failcountdata = {
"type": "stackedColumn",
"xValueFormatString": "HH:mm 'Uhr'",
"name": "FAILCOUNT",
"showInLegend": "true",
"color": "#dd4b39",
"dataPoints": [{
"x": "2021-10-19T11:31:00.000Z",
"y": 2,
"requestcount": 2,
"failcount": 2,
"avgtime": 0,
"maxtime": 0
},
{
"x": "2021-10-19T11:32:00.000Z",
"y": 1,
"requestcount": 2,
"failcount": 1,
"avgtime": 0,
"maxtime": 0
},
{
"x": "2021-10-19T11:35:00.000Z",
"y": 1,
"requestcount": 1,
"failcount": 1,
"avgtime": 0,
"maxtime": 0
},
{
"x": "2021-10-19T11:41:00.000Z",
"y": 2,
"requestcount": 2,
"failcount": 2,
"avgtime": 0,
"maxtime": 0
},
{
"x": "2021-10-19T11:43:00.000Z",
"y": 1,
"requestcount": 1,
"failcount": 1,
"avgtime": 0,
"maxtime": 0
},
{
"x": "2021-10-19T11:46:00.000Z",
"y": 1,
"requestcount": 2,
"failcount": 1,
"avgtime": 2,
"maxtime": 2
},
{
"x": "2021-10-19T11:50:00.000Z",
"y": 1,
"requestcount": 2,
"failcount": 1,
"avgtime": 1,
"maxtime": 1
},
{
"x": "2021-10-19T11:55:00.000Z",
"y": 1,
"requestcount": 1,
"failcount": 1,
"avgtime": 0,
"maxtime": 0
},
{
"x": "2021-10-19T11:56:00.000Z",
"y": 1,
"requestcount": 3,
"failcount": 1,
"avgtime": 5,
"maxtime": 7
},
{
"x": "2021-10-19T11:57:00.000Z",
"y": 2,
"requestcount": 2,
"failcount": 2,
"avgtime": 0,
"maxtime": 0
},
{
"x": "2021-10-19T11:59:00.000Z",
"y": 2,
"requestcount": 2,
"failcount": 2,
"avgtime": 0,
"maxtime": 0
},
{
"x": "2021-10-19T12:03:00.000Z",
"y": 2,
"requestcount": 2,
"failcount": 2,
"avgtime": 0,
"maxtime": 0
},
{
"x": "2021-10-19T12:06:00.000Z",
"y": 1,
"requestcount": 1,
"failcount": 1,
"avgtime": 0,
"maxtime": 0
},
{
"x": "2021-10-19T12:07:00.000Z",
"y": 1,
"requestcount": 1,
"failcount": 1,
"avgtime": 0,
"maxtime": 0
},
{
"x": "2021-10-19T12:09:00.000Z",
"y": 1,
"requestcount": 1,
"failcount": 1,
"avgtime": 0,
"maxtime": 0
},
{
"x": "2021-10-19T12:10:00.000Z",
"y": 1,
"requestcount": 1,
"failcount": 1,
"avgtime": 0,
"maxtime": 0
},
{
"x": "2021-10-19T12:15:00.000Z",
"y": 1,
"requestcount": 2,
"failcount": 1,
"avgtime": 2,
"maxtime": 2
},
{
"x": "2021-10-19T12:16:00.000Z",
"y": 1,
"requestcount": 1,
"failcount": 1,
"avgtime": 0,
"maxtime": 0
},
{
"x": "2021-10-19T12:18:00.000Z",
"y": 1,
"requestcount": 1,
"failcount": 1,
"avgtime": 0,
"maxtime": 0
},
{
"x": "2021-10-19T12:26:00.000Z",
"y": 1,
"requestcount": 1,
"failcount": 1,
"avgtime": 0,
"maxtime": 0
}
]
};
let requestcountdata = {
"type": "stackedColumn",
"xValueFormatString": "HH:mm 'Uhr'",
"name": "REQUESTCOUNT",
"showInLegend": "true",
"color": "#00a65a",
"dataPoints": [{
"x": "2021-10-19T11:31:00.000Z",
"y": 0,
"requestcount": 2,
"failcount": 2,
"avgtime": 0,
"maxtime": 0
},
{
"x": "2021-10-19T11:32:00.000Z",
"y": 1,
"requestcount": 2,
"failcount": 1,
"avgtime": 0,
"maxtime": 0
},
{
"x": "2021-10-19T11:35:00.000Z",
"y": 0,
"requestcount": 1,
"failcount": 1,
"avgtime": 0,
"maxtime": 0
},
{
"x": "2021-10-19T11:38:00.000Z",
"y": 1,
"requestcount": 1,
"failcount": 0,
"avgtime": 2,
"maxtime": 2
},
{
"x": "2021-10-19T11:39:00.000Z",
"y": 3,
"requestcount": 3,
"failcount": 0,
"avgtime": 0,
"maxtime": 1
},
{
"x": "2021-10-19T11:40:00.000Z",
"y": 1,
"requestcount": 1,
"failcount": 0,
"avgtime": 5,
"maxtime": 5
},
{
"x": "2021-10-19T11:41:00.000Z",
"y": 0,
"requestcount": 2,
"failcount": 2,
"avgtime": 0,
"maxtime": 0
},
{
"x": "2021-10-19T11:43:00.000Z",
"y": 0,
"requestcount": 1,
"failcount": 1,
"avgtime": 0,
"maxtime": 0
},
{
"x": "2021-10-19T11:44:00.000Z",
"y": 2,
"requestcount": 2,
"failcount": 0,
"avgtime": 2,
"maxtime": 3
},
{
"x": "2021-10-19T11:46:00.000Z",
"y": 1,
"requestcount": 2,
"failcount": 1,
"avgtime": 2,
"maxtime": 2
},
{
"x": "2021-10-19T11:47:00.000Z",
"y": 1,
"requestcount": 1,
"failcount": 0,
"avgtime": 0,
"maxtime": 0
},
{
"x": "2021-10-19T11:49:00.000Z",
"y": 2,
"requestcount": 2,
"failcount": 0,
"avgtime": 0,
"maxtime": 1
},
{
"x": "2021-10-19T11:50:00.000Z",
"y": 1,
"requestcount": 2,
"failcount": 1,
"avgtime": 1,
"maxtime": 1
},
{
"x": "2021-10-19T11:55:00.000Z",
"y": 0,
"requestcount": 1,
"failcount": 1,
"avgtime": 0,
"maxtime": 0
},
{
"x": "2021-10-19T11:56:00.000Z",
"y": 2,
"requestcount": 3,
"failcount": 1,
"avgtime": 5,
"maxtime": 7
},
{
"x": "2021-10-19T11:57:00.000Z",
"y": 0,
"requestcount": 2,
"failcount": 2,
"avgtime": 0,
"maxtime": 0
},
{
"x": "2021-10-19T11:59:00.000Z",
"y": 0,
"requestcount": 2,
"failcount": 2,
"avgtime": 0,
"maxtime": 0
},
{
"x": "2021-10-19T12:00:00.000Z",
"y": 2,
"requestcount": 2,
"failcount": 0,
"avgtime": 2,
"maxtime": 2
},
{
"x": "2021-10-19T12:01:00.000Z",
"y": 1,
"requestcount": 1,
"failcount": 0,
"avgtime": 0,
"maxtime": 0
},
{
"x": "2021-10-19T12:02:00.000Z",
"y": 1,
"requestcount": 1,
"failcount": 0,
"avgtime": 0,
"maxtime": 0
},
{
"x": "2021-10-19T12:03:00.000Z",
"y": 0,
"requestcount": 2,
"failcount": 2,
"avgtime": 0,
"maxtime": 0
},
{
"x": "2021-10-19T12:06:00.000Z",
"y": 0,
"requestcount": 1,
"failcount": 1,
"avgtime": 0,
"maxtime": 0
},
{
"x": "2021-10-19T12:07:00.000Z",
"y": 0,
"requestcount": 1,
"failcount": 1,
"avgtime": 0,
"maxtime": 0
},
{
"x": "2021-10-19T12:09:00.000Z",
"y": 0,
"requestcount": 1,
"failcount": 1,
"avgtime": 0,
"maxtime": 0
},
{
"x": "2021-10-19T12:10:00.000Z",
"y": 0,
"requestcount": 1,
"failcount": 1,
"avgtime": 0,
"maxtime": 0
},
{
"x": "2021-10-19T12:13:00.000Z",
"y": 1,
"requestcount": 1,
"failcount": 0,
"avgtime": 3,
"maxtime": 3
},
{
"x": "2021-10-19T12:15:00.000Z",
"y": 1,
"requestcount": 2,
"failcount": 1,
"avgtime": 2,
"maxtime": 2
},
{
"x": "2021-10-19T12:16:00.000Z",
"y": 0,
"requestcount": 1,
"failcount": 1,
"avgtime": 0,
"maxtime": 0
},
{
"x": "2021-10-19T12:18:00.000Z",
"y": 0,
"requestcount": 1,
"failcount": 1,
"avgtime": 0,
"maxtime": 0
},
{
"x": "2021-10-19T12:20:00.000Z",
"y": 1,
"requestcount": 1,
"failcount": 0,
"avgtime": 2,
"maxtime": 2
},
{
"x": "2021-10-19T12:26:00.000Z",
"y": 0,
"requestcount": 1,
"failcount": 1,
"avgtime": 0,
"maxtime": 0
}
]
};
// new chart.js
// get mouse position for tooltip positioning
Chart.Tooltip.positioners.custom = function(elements, eventPosition) {
let tooltip = this;
return {
x: eventPosition.x,
y: eventPosition.y
};
}
// get context for canvas
let ctx = $('#chartjs')[0].getContext('2d');
window.chartjs = new Chart(ctx, {
type: 'bar',
data: {
datasets: [{
label: 'REQUESTCOUNT',
data: requestcountdata.dataPoints,
backgroundColor: '#00a65a',
hoverBackgroundColor: '#00a65a',
hoverBorderColor: 'black',
hoverBorderWidth: '2',
},
{
label: 'FAILCOUNT',
data: failcountdata.dataPoints,
backgroundColor: '#dd4b39',
hoverBackgroundColor: '#dd4b39',
hoverBorderColor: 'black',
hoverBorderWidth: '2',
}
]
},
options: {
responsive: true,
hover: {
mode: 'point'
},
legend: {
position: 'top'
},
scales: {
xAxes: [{
stacked: true,
offset: true,
barThickness: '6',
type: "time",
time: {
tooltipFormat: 'HH:mm',
displayFormats: {
hour: 'HH:mm',
minute: 'HH:mm'
},
unitStepSize: 5,
},
ticks: {
major: {
enabled: true
}
},
scaleLabel: {
display: true,
labelString: 'Zeitpunkt',
fontSize: 24,
fontStyle: 'bold'
}
}],
yAxes: [{
stacked: true,
scaleLabel: {
display: true,
labelString: 'Anzahl',
fontSize: 24,
fontStyle: 'bold'
},
ticks: {
major: {
enabled: true,
},
beginAtZero: true,
precision: 0,
},
}]
},
tooltips: {
position: 'custom',
displayColors: false,
borderColor: "#dd4b39",
borderWidth: 2,
bodyFontSize: 14,
bodyFontStyle: 'bold',
titleFontSize: 16,
titleFontStyle: 'bold',
titleSpacing: 2,
callbacks: {
label: function(tooltipItem, data) {
let item = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
return ["Requests: " item.requestcount, "Failed: " item.failcount, "Durchschnittsdauer: " item.avgtime "s", "Maximale Dauer: " item.maxtime "s"];
},
beforeTitle: function(tooltipItem, data) {
return "Zeitpunkt: ";
}
}
}
}
}); <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="height: 500px; width: 100%" id="chartjsContainer">
<canvas id="chartjs"></canvas>
</div> The two data arrays reassemble the old one from canvasJS and I’m directly feeding the «*.dataPoints» to chartJS to populate the graph. This works so far.
But as you see I’ve got two problems.
- The red bars are on top of the bar instead of beginning at the bottom. I tried to change the order of the dataset but that didn’t change anything.
- Some red data points are all over the place and starting for example at point 3 instead of 0. I don’t know why and I think that’s the core issue of why I can’t stack my graph properly too.
I hope I explained everything. If you need anything more hmu. Thanks for the help!