Javascript-forum

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>

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

Vielen Dank, nächstes mal werde ich den gesamten Code einstellen.

Die Frage nach min, max und Schrittweite wird hier beantwortet mit Beispiel:
https://www.chartjs.org/docs/latest/axes...inear.html

Und die Frage nach einer benutzerdefinierten Beschriftung hier:
https://stackoverflow.com/questions/3770...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

                }

            }

        };

Super Danke für die Antwort. Hat geklappt.

Gerold

rzscout

Gerold

Sempervivum

Gerold