+- Javascript-forum (https://javascript-forum.de)
+-- Forum: Javascript allgemeiner (https://javascript-forum.de/forumdisplay.php?fid=16)
+--- Forum: Andere Bibiliotheken, Plugins und Scripte (https://javascript-forum.de/forumdisplay.php?fid=63)
+--- Thema: chart.js Probleme (/showthread.php?tid=2567)
chart.js Probleme - Gerold - 04.09.2023
Hallo,
vorweg ich kenne mich mit JavaScript nicht aus. Möchte aber auf meiner Website einen einfachen Chart erstellen. Dazu verwende ich chart.js. Der anschließende Code funktioniert auch, nur möchte ich 2 Dinge ändern, die mir nicht gelingen: Ich möchte die Bezeichnung der Y-Achse selber durführen, mit: wenig, mittel, hoch und die Höhe der Y-Achse nicht von den Werten abhängig machen sondern einen Fixe Größe zuordnen. Wie muss ich den Code anpassen. Danke für das Feedback.
<script>
// Daten für den Chart
var data = {
labels: ['Label 1', 'Label 2', 'Label 3'],
datasets: [{
label: 'Datenreihe 1',
backgroundColor: 'rgba(75, 192, 192, 0.2)',
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1,
data: [10, 20, 15]
}]
};
// Chart-Optionen
var options = {
plugins: {
title: {
display: true,
text: 'Mein Chart'
},
scales: {
x: {
ticks: {
maxRotation: 90,
minRotation: 0
}
},
y: {
type: 'category',
beginAtZero: true,
max: 'stark', // Benutzerdefinierte maximale Höhe
labels: ['schwach', 'mittel', 'stark'] // Benutzerdefinierte Beschriftungen
}
}
}
};
// Chart erstellen
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: data,
options: options
});
</script>
RE: chart.js Probleme - rzscout - 04.09.2023
Sorry,
hab ich jetzt einfach mal kopiert:
Code:
<!DOCTYPE html>
<html>
<head>
<title>Mein Chart</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<canvas id="myChart"></canvas>
<script>
// Daten für den Chart
var data = {
labels: ['Label 1', 'Label 2', 'Label 3'],
datasets: [{
label: 'Datenreihe 1',
backgroundColor: 'rgba(75, 192, 192, 0.2)',
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1,
data: [10, 20, 15]
}]
};
// Chart-Optionen
var options = {
plugins: {
title: {
display: true,
text: 'Mein Chart'
},
scales: {
x: {
ticks: {
maxRotation: 90,
minRotation: 0
}
},
y: {
type: 'category',
beginAtZero: true,
position: 'left', // Position der Y-Achse auf der linken Seite
labels: ['wenig', 'mittel', 'hoch'], // Benutzerdefinierte Beschriftungen
max: 'hoch', // Benutzerdefinierte maximale Höhe
}
}
}
};
// Chart erstellen
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: data,
options: options
});
</script>
</body>
</html>Viel Erfolg
rzscout
RE: chart.js Probleme - Gerold - 05.09.2023
Vielen Dank, nächstes mal werde ich den gesamten Code einstellen.
RE: chart.js Probleme - Sempervivum - 06.09.2023
Die Frage nach min, max und Schrittweite wird hier beantwortet mit Beispiel:
https://www.chartjs.org/docs/latest/axes/cartesian/linear.html
Und die Frage nach einer benutzerdefinierten Beschriftung hier:
https://stackoverflow.com/questions/37708374/how-do-i-customize-y-axis-labels-on-a-chart-js-line-chart
Offenbar gibt es da nur den umständlichen Weg über einen Callback.
Dies funktioniert dann bei mir:
Code:
// Chart-Optionen
var options = {
plugins: {
title: {
display: true,
text: 'Mein Chart'
},
},
scales: {
x: {
ticks: {
maxRotation: 90,
minRotation: 0,
}
},
y: {
min: 0,
max: 30,
ticks: {
stepSize: 10,
callback: function (label, index, labels) {
// switch (label) {
switch (true) {
case label < 5:
return 'nichts';
case label < 15:
return 'wenig';
case label < 25:
return 'mittel';
default:
return 'hoch';
}
},
},
// type: 'category',
// beginAtZero: true,
position: 'left', // Position der Y-Achse auf der linken Seite
// max: 'hoch', // Benutzerdefinierte maximale Höhe
}
}
};RE: chart.js Probleme - Gerold - 12.09.2023
Super Danke für die Antwort. Hat geklappt.