Exemple d'intégration de Chart.Js en ASP.NET Mvc

Chart.cs

using System.Collections.Generic;

namespace ChartJs.Models
{
    public class Chart
    {
        public string[] labels { get; set; }
        public List<Datasets> datasets { get; set; }
        
        public static Chart CreateLineChart(string datasetName, string[] labels, int[] values)
        {
            Chart chart = new Chart();
            chart.labels = labels;
            
            List<Datasets> dataSet = new List<Datasets>();
            dataSet.Add(new Datasets()
            {
                label = datasetName,
                data = values,
                borderColor = "rgba(75,192,192,1)", //Peut-être modifié par la couleur désirée
                backgroundColor = "rgba(75,192,192,0.4)",
                borderWidth = "1"
            });
            chart.datasets = dataSet;
            return chart;
        }
    }
    
    public class Datasets
    {
        public string label { get; set; }
        public string backgroundColor { get; set; }
        public string borderColor { get; set; }
        public string borderWidth { get; set; }
        public int[] data { get; set; }
    }
    
}

ChartActionExample.cs

public Class Controller {
    public JsonResult ExempleActionChart()
    {   
        List<string> labels = new List<string>();
        List<int> values = new List<int>();

        //TODO : insertion des données dans les deux listes

        Chart chart = Chart.CreateLineChart("datasetTitle", labels.ToArray(), values.ToArray());
        return Json(chart, JsonRequestBehavior.AllowGet); //JsonResult
    }
}

JqAjaxExtension.js

jQuery.extend({
    getValues: function (url) {
        var result = null;
        $.ajax({
            url: url,
            type: 'get',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            async: false,
            success: function (data) {
                result = data;
            }
        });
        return result;
    }
});

VueExemple.cshtml

<canvas id="canvasID"></canvas>
<script src="~/Scripts/Chart.js"></script> //Importé précédemment de chartjs.org
<script src="~/Scripts/JqAjaxExtension.js"></script>
<script>
      //---- Chargement et affichage assynchrone des données pour les charts de tendance ---------
      var c = document.getElementById("canvasID");
      ctx = c.getContext("2d");
      tData = $.getValues("/Controller/ExempleActionChart"); //Require jquery
      myLineChart = new Chart(ctx, {
          type: 'line', //line, bar...
          data: tData,
          options: {
              tooltips: {
                  enabled: true
              }
          }
      });
      //Voir Chatjs.org pour plus de details sur les options
 </script>