Javascript-forum › Javascript allgemeiner › Andere Bibiliotheken, Plugins und Scripte
chart.js Probleme

Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
Baumstrukturmodus
chart.js Probleme
Gerold Offline
Junior Member
**
Beiträge: 3
Themen: 1
Registriert seit: Sep 2023
Bewertung: 0
#1
04.09.2023, 19:33
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>
Suchen Bewerten
Zitieren
rzscout Offline
Administrator
*******
Beiträge: 306
Themen: 14
Registriert seit: Jun 2022
Bewertung: 26
#2
04.09.2023, 21:27
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
"Gerne dürft ihr mir eine gute Bewertung da lassen aber auch gegenüber Kritik bin ich offen" Angel
Suchen Bewerten
Zitieren
Gerold Offline
Junior Member
**
Beiträge: 3
Themen: 1
Registriert seit: Sep 2023
Bewertung: 0
#3
05.09.2023, 06:36
Vielen Dank, nächstes mal werde ich den gesamten Code einstellen.
Suchen Bewerten
Zitieren
Sempervivum Offline
Member
***
Beiträge: 97
Themen: 0
Registriert seit: Jul 2023
Bewertung: 10
#4
06.09.2023, 19:37
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
                }
            }
        };
Glaube denen, die die Wahrheit suchen, und zweifle an denen, die sie gefunden haben.
(Andrι Gide (1869-1951), frz. Schriftst., 1947 Nobelpreis)
Suchen Bewerten
Zitieren
Gerold Offline
Junior Member
**
Beiträge: 3
Themen: 1
Registriert seit: Sep 2023
Bewertung: 0
#5
12.09.2023, 19:15
Super Danke für die Antwort. Hat geklappt.
Suchen Bewerten
Zitieren


Gehe zu:


Benutzer, die gerade dieses Thema anschauen:
1 Gast/Gäste