ASP VIEW mit chart.js

Question

Hallo,

in einer View möchte ich eine Grafik erstellen und die Daten über einen button aktuallisieren.

Das Erstellen der Grafik funktioniert auch. Aber das Update geht nicht.

Folgender Code :

<div>
    <canvas id="myChart" width="400" height="400"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    const ctx = document.getElementById('myChart');

    new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
            datasets: [{
                label: '# of Votes',
                data: [12, 19, 3, 5, 2, 3],
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true
                }
            },
            plugins: {
            title: {
                display: true,
                text: 'Chart.js'
            }
        },
        }
    });

    alert('aaa');
   
   

   function updateDoughnutChart(){
        alert('1');
      myChart.data.datasets[0].data[0] = 444;
        alert('2');
      myChart.data.datasets[0].data[1] = 5555;
        alert('3');
      myChart.update();
        alert('4');
    }


</script>

Nach dem Laden der View wird die Garfik erstellt und die "info aaa" wird angezeigt

Wenn ich die function updateDoughnutChart() starte kommt noch die "info 1" dann ist schluss.

Was mache ich falsch ?  Kann mir da jemand helfen ?

DANKE.

---

Gruß Roland

Answer 1

Hallo Roland,

Wenn Du Datensätze (datasets) in chart.js aktualisieren musst, kannst Du versuchen, die forEach-Methode hinzuzufügen, die es Dir ermöglicht, jeden Datensatzwert zu durchlaufen. Anschließend nutzt Du die Push-Methode und am Ende die chart.update-Methode. Der folgende Artikel enthält einen Link zur Dokumentation dieser Drittanbieterbibliothek und insbesondere zur chart.update-Methode:
Constant updating of x- and y-axis using a C# function to update a Chart.js chart in ASP.NET core Web Application Razor Pages

Gruß,
Ivan Dragov

---

Bitte haben Sie Verständnis dafür, dass im Rahmen dieses Forums, welches auf dem Community-Prinzip „IT-Pros helfen IT-Pros“ beruht, kein technischer Support geleistet werden kann oder sonst welche garantierten Maßnahmen seitens Microsoft zugesichert werden können.

Answer 2

Hallo Roland,

myChart ist wohl nicht vorhanden. So sollte es gehen

const myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
            datasets: [{
                label: '# of Votes',
                data: [12, 19, 3, 5, 2, 3],
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true
                }
            },
            plugins: {
            title: {
                display: true,
                text: 'Chart.js'
            }
        },
        }
    });

In den meisten Browsern kann man mit der F12 Taste die DevTools aufrufen. Darin kann man den JavaScript Code auch debuggen

---

Gruß Thomas
Der Junior lernt täglich, um Senior zu werden.
Der Senior lernt täglich, da er weiß, dass er immer Junior bleiben wird.
Github