Charger dynamiquement un graphique en ASP.NET CORE depuis la Base de données SQL SERVER

Bonjour,

Mon objectif est défini en intitulé. Mes méthodes en Back-End sont exécutées correctement. Seulement, je ne sais pas comment charger les données sur le graphique avec chartjs. Voic mon code ASPNET CORE:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
using Microsoft.AspNetCore.Mvc;
using GraphiqueDesDonnees.DataLayer;
using GraphiqueDesDonnees.Models;
 
namespace GraphiqueDesDonnees.Controllers
{
    public class DonneesDeVenteController : Controller
    {
        private readonly DbContextGraphique _ctx;
 
        public DonneesDeVenteController(DbContextGraphique ctx)
        {
            _ctx = ctx;
        }
 
        public IActionResult Index()
        {
            return View();
        }
 
        public IActionResult VoirDonneesVente()
        {
          var data =  GetDonneesVentes();
            return View(data);
        }
 
        [HttpPost]
        public List<object> GetDonneesVentes()
        {
            List<object> donnees = new List<object>();
            List<string> labels = _ctx.DonneesGraph.Select(p =>p.NomDuMois).ToList();
 
            donnees.Add(labels);
 
            List<int> NombreDeVente = _ctx.DonneesGraph.Select(p => p.VenteTotal).ToList();
 
            donnees.Add(NombreDeVente);
 
            return donnees;
        }
 
    }
}

Mon code CHTML et AJAX:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}
 
<input id="ID" value="Voir le graphique" type="button" />
<div>
    <canvas id="myChart"></canvas>
</div>
 
 
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 
<script type="text/javascript">
   
   $(function()
   {
       $("#ID").click(function (){
 
           $.ajax({
               type:"POST",
                     url:"/DonneesDeVente/GetDonneesVentes",
                 data:"",
                 contextType:"application/json; chartset=utf-8",
                 dataType: "json",
                 success: OnSuccessResult,
                 error: OnError
           });
 
            function OnSuccessResult (donnees){
 
               alert("Chargement des données!")
 
               var _data=donnees;
               var _chartLabels = _data[0];
               var _chartData = _data[1];
 
 
                var barColor = ["red", "green","blue","orange","brown","purple","red", "green","blue","orange","brown","purple"];
 
               new Chart("myChart",
               
               {
                   type:"bar",
                   data:
                   {
                       labels:= _chartLabels,
                       datasets: [{
                           backgroundColor: barColor,
                           data:_chartData
                       }]
                   }
               });
           }
 
           function OnError (err){
               alert("Chargement de données échoué!");
           }
       }
   }) 
    
    
    
</script>

Un coup de main salvateur est vivement souhaité.

Cordialement!