Fermer

juin 29, 2023

La puissance de l’interface utilisateur Telerik pour les graphiques ASP.NET Core

La puissance de l’interface utilisateur Telerik pour les graphiques ASP.NET Core


Découvrez les types de graphiques disponibles et comment les implémenter et les intégrer à d’autres composants lorsque vous utilisez l’interface utilisateur Telerik pour ASP.NET Core.

Les graphiques sont un excellent outil de représentation des données car ils nous aident à interpréter et à comprendre rapidement des données complexes. En utilisant des graphiques, nous pouvons facilement comprendre, comparer et analyser plusieurs ensembles de données ainsi qu’interagir avec les données. Ils peuvent améliorer l’expérience utilisateur globale de notre application Web en visualisant les données d’une manière plus engageante et accessible. Les graphiques donnent simplement vie aux données !

Dans cet article de blog, je vais vous montrer comment choisir le type de graphique approprié, et incorporer et utiliser le Interface utilisateur Telerik pour les graphiques ASP.NET Core Dans votre ASP.NET Core application.

Table des matières

Comment choisir le tableau approprié

Pour choisir le bon type de graphique, vous devez déterminer :

  • Le type et la structure des données avec lesquelles vous travaillez
  • La relation entre l’axe des x et l’axe des y – si x et y sont dépendants (c’est-à-dire que pour chaque x il n’y a qu’une seule valeur y) ou s’il n’y a pas de relation entre x et y
  • Le public cible et son niveau de familiarité avec les données

Généralement, l’interface utilisateur Telerik pour les graphiques ASP.NET Core est divisée dans les catégories suivantes :

  • Graphiques catégoriels – Ils sont adaptés pour afficher des données qui représentent des qualités ou des caractéristiques (données pouvant être divisées en catégories ou groupes, comme le type de voiture, le niveau d’éducation ou la marque d’ordinateurs). De tels graphiques sont Graphiques linéaireshorizontal et vertical Diagramme à barres,
    Zone et Diagrammes de boîte à moustaches.

  • Graphiques circulaires – Cette catégorie de graphiques utilise un cercle ou un secteur pour représenter les données nominales (données catégorielles où chaque point de données appartient à une seule catégorie). Ils sont utiles pour visualiser les proportions ou les pourcentages (par exemple, pour rendre les données comme faisant partie d’un tout). Les cartes circulaires sont Camemberts, Graphiques en anneau, Cartes polaires et Cartes radar.

  • Graphiques de forme libre – Ces graphiques utilisent différentes formes pour afficher des parties structurées de données. Ils sont couramment utilisés pour représenter des données numériques (par exemple, la production d’électricité par an). Vérifiez Graphique en entonnoir à titre d’exemple.

  • Nuage de points – Ces graphiques conviennent à la visualisation de données en deux dimensions et à la comparaison de différents ensembles de données numériques ou de différents types de données. Un exemple de diagramme de dispersion est le Graphiques à bulles.

Lorsque vous identifiez la catégorie pertinente en fonction du type de données à présenter, l’étape suivante consiste à choisir le type de graphique dans l’ensemble de la catégorie. Je recommanderais d’explorer le Telerik UI pour les démos en ligne ASP.NET Core Chart pour passer en revue les différents types de graphiques et le type de données qu’ils affichent.

Configurer le graphique

Avant de configurer les éléments et les options du graphique, vous devez déterminer comment le graphique sera lié aux données, localement ou à distance. L’interface utilisateur Telerik pour les graphiques ASP.NET Core fournit les approches de liaison de données suivantes :

  • Transmission directe des données en ligne à la série de données dans la configuration du graphique. Cette option est utile lorsque vous travaillez avec un jeu de données petit et simple. Découvrez cet exemple ci-dessous, où les séries de données et les catégories sont déclarées en tant que tableaux :
@(Html.Kendo().Chart()
  .Name("chart")
  .Title("Number of sold products through the years")
  .Series(series =>
  {
    series.Line(new  double[] { 21560, 10548, 12548, 47526, 10254 }).Name("Product A");
    series.Line(new  double[] { 10258, 36985, 45287, 23568, 35982 }).Name("Product B");
  })
  .CategoryAxis(axis => axis
    .Categories(new  string[] { "2018", "2019", "2020", "2021", "2022" })
  )
)
  • Liaison du graphique à une collection Model fournie. Vous pouvez formater les données côté serveur et utiliser un modèle pour envoyer les données à la vue avec le graphique. Le graphique accepte la collection Model dans son constructeur :
@model  IEnumerable<ProductViewModel>

@(Html.Kendo().Chart(Model)
  .Name("chart")
  .Title("Number of sold products through the years")
  .Series(series =>
  {
    series.Line(model => model.Sold)
      .Name("Products").CategoryField("Year"));
  })
)
  • Utilisant un Composant DataSource pour lier le graphique à des données distantes. Le DataSource envoie une requête AJAX au point de terminaison distant spécifié pour récupérer les données. Il s’agit de l’approche la plus flexible de la liaison de données, car vous pouvez l’utiliser pour des ensembles de données volumineux et complexes, envoyer des paramètres supplémentaires via la demande de lecture (par exemple, des jetons d’authentification, des variables personnalisées, etc.), charger les données à la demande, etc. .
@(Html.Kendo().Chart<ProductViewModel>()
  .Name("chart")
  .Title("Number of sold products through the years")
  .DataSource(ds => ds.Read(read => read.Action("GetProductData", "Product")))
  .Series(series => {
    series.Line(model => model.Sold)
      .Name("Products").CategoryField("Year");
    })
)

Éléments de graphique requis

L’étape suivante consiste à définir la configuration de base du graphique, afin que vous puissiez charger les données et voir comment elles sont sorties. Quels sont les éléments graphiques requis ?

  • Le série de données qui sont tracés sur le graphique. Précisez-les via le Série(série => série) méthode et utiliser la SérieDéfauts() possibilité d’appliquer les paramètres par défaut pour toutes les séries. La série offre une variété d’options de personnalisation : étiquettes, marqueurs de données et notes (utilisées pour afficher les métadonnées), fonctions d’agrégation telles que min, max, moyenne ou taille, marges, etc. De même, pour modifier les couleurs de série par défaut, insérez un tableau avec les codes ou noms de couleurs souhaités dans le Couleurs de la série() option.
@(Html.Kendo().Chart()
  .Name("chart")
  .Title("Number of sold products through the years")
  .SeriesDefaults(seriesDefaults =>
    seriesDefaults.Line().Style(ChartSeriesStyle.Smooth)
  )
  .SeriesColors(new  string[] { "#1FD2D5","#F7D455" })

  .Series(series =>
  {
    series.Line(new  double[] { 21560, 10548, 12548, 47526, 10254 }).Name("Product A");
    series.Line(new  double[] { 10258, 36985, 45287, 23568, 35982 }).Name("Product B");
  })
  .CategoryAxis(axis => axis
    .Categories(new  string[] { "2018", "2019", "2020", "2021", "2022" })
  )
)
  • Le axes. Les axes principaux sont l’horizontal (axe x) et le vertical (axe y). Généralement, l’axe des x montre les catégories de l’ensemble de données, il est donc appelé CatégorieAxe. L’axe des ordonnées, qui affiche les valeurs le long de la dimension verticale, est appelé ValueAxis. Une exception sont les graphiques en nuage de points, dans lesquels les axes sont nommés Axe X et Axe Y. Semblable à la série, vous pouvez définir des options par défaut pour les deux axes via le AxisDefaults() méthode, par exemple, les titres, les étiquettes, les notes, les options de réticule, etc.
@(Html.Kendo().Chart()
  .Name("chart")
  .Title("Number of sold products through the years")
  .Series(series =>
  {
    series.Line(new  double[] { 21560, 10548, 12548, 47526, 10254 }).Name("Product A");
    series.Line(new  double[] { 10258, 36985, 45287, 23568, 35982 }).Name("Product B");
  })
  .AxisDefaults(axis => axis
    .Line(l => l.Visible(true)).Color("#858278"))
  .CategoryAxis(axis => axis
    .Categories(new  string[] { "2018", "2019", "2020", "2021", "2022" })
    .MajorGridLines(lines => lines.Visible(false))
  )
  .ValueAxis(axis => axis
    .Numeric()
    .Line(line => line.Visible(false))
    .AxisCrossingValue(-10)
  )
)

Améliorations des graphiques

Maintenant, lorsque les séries et les axes du graphique sont définis, il est temps de revoir la façon dont le graphique représente les données. Vous pouvez tester l’extrait de code ci-dessus dans le Télérik REPL Cour de récréation. Ouvrir cet exemple et exécutez-le pour voir le résultat.

Il s’agit d’un graphique linéaire de base, mais vous pouvez l’améliorer davantage en fonction de vos besoins en ajoutant les paramètres suivants :

  • Le tableau légende affiche les noms des séries de données. L’utilisateur peut activer/désactiver certaines séries en cliquant sur leurs noms dans la légende pour avoir une meilleure vue d’ensemble lorsque le graphique affiche de nombreuses séries. Vous pouvez contrôler les séries à afficher dans la légende et l’apparence générale de la légende, par exemple, la position, l’orientation, la taille, les étiquettes de série, etc. Ajouter le Légende() méthode, et l’intellisense vous montrera toutes les options disponibles.
@(Html.Kendo().Chart()
  .Name("chart")
  .Legend(legend =>
  {
    legend.Align(ChartLegendAlign.Start);
    legend.Position(ChartLegendPosition.Top);
    legend.Background("#DFDDD6");
    legend.Title(title => title.Text("Legend").Color("black"));
    legend.Orientation(ChartLegendOrientation.Horizontal);
    legend.InactiveItems(items => items.Labels(labels => labels.Color("#0E549A")));
  })
    
    ...
)
  • Une autre fonctionnalité utile est le graphique info-bulles. En ajoutant des info-bulles, vous pouvez afficher plus de détails sur chaque point de données lorsque l’utilisateur le survole. Les info-bulles fournissent une option de création de modèles, où vous pouvez diriger la valeur de n’importe quelle propriété du modèle qui se lie au graphique. De plus, il existe une option pour afficher une info-bulle partagée, qui affiche tous les points de données par catégorie. Vous pouvez régler le Info-bulle() méthode dans la configuration du graphique et au niveau des séries et des catégories.
@(Html.Kendo().Chart()
  .Name("chart")
  .Tooltip(tooltip =>
  {
    tooltip.Visible(true);
    tooltip.Shared(true);
    tooltip.Background("#1FD5EA");
    tooltip.Font("20px sans - serif");
    tooltip.Format("{0:n2}");
  })
    
    ...
)
  • Le graphique se compose d’un zone graphiquequi correspond essentiellement à la totalité de la zone visible du graphique, et un zone de parcellequi contient la série (elle est imbriquée dans la zone du graphique) :

La zone de graphique est l'ensemble du graphique et les éléments environnants, les titres, les étiquettes, etc. La zone de tracé est la partie graphique.

Pour personnaliser l’apparence générale du graphique dans votre application, ajoutez le ZoneGraphique() et Zone de tracé() options, qui vous permettent de définir la largeur, la hauteur, la bordure, la couleur, la marge et bien d’autres pour chaque zone :

@(Html.Kendo().Chart()
  .Name("chart")
  .PlotArea(plotarea =>
  {
    plotarea.Border(border => border.DashType(ChartDashType.Dash).Width(2).Color("red"));
  })
  .ChartArea(chartarea =>
  {
    chartarea.Background("#ffffff");
    chartarea.Margin(30);
    chartarea.Border(border => border.DashType(ChartDashType.Dash).Width(2).Color("black"));
    chartarea.Width(600);
  })
    
    ...
)
  • Le graphique est plus beau avec un titre et Sous-titre:
@(Html.Kendo().Chart()
  .Name("chart")
  .Title(title => title.Text("Number of sold products through the years").Align(ChartTextAlignment.Center).Font("18px Helvetica").Border(border => border.Width(2).Color("green")))
  .Subtitle(subtitle => subtitle.Text("Compare Product A and Product B").Font("14px Helvetica"))
  
  ...
)
  • Lorsque vous liez le graphique à un ensemble de données volumineux, vous pouvez bénéficier de la panoramique et zoom Fonctionnalité. De cette façon, vous pouvez naviguer dans les séries de données et les catégories et effectuer un zoom avant/arrière sur la zone de tracé. Ces fonctionnalités sont prises en charge prêtes à l’emploi et il vous suffit de les activer en ajoutant le Pannable() et Zoomable() options.
@(Html.Kendo().Chart()
  .Name("chart")
  .Pannable(true)
  .Zoomable(zoomable => zoomable
  .Mousewheel(mousewheel => mousewheel.Lock(ChartAxisLock.Y)) 
  .Selection(selection => selection.Lock(ChartAxisLock.Y)) 
  )
    
    ...
)
  • Les graphiques peuvent être exporté en PDF format. Une fois que vous avez activé l’option d’exportation PDF, gérez l’événement « clic » d’un bouton et déclenchez le côté client enregistrerAsPDF() méthode du tableau. En conséquence, l’utilisateur exportera le graphique au format PDF en un seul clic.
@(Html.Kendo().Button()
  .Name("export-pdf")
  .HtmlAttributes(new { type = "button" })
  .Content("Export to PDF"))

  @(Html.Kendo().Chart()
    .Name("chart")
    .Pdf(pdf => pdf.FileName("ProductChart").PaperSize("A4").Date(DateTime.Now))
    
    ...
)
<script>
  $(document).ready( function () {
    $("#export-pdf").click(function () {
      $("#chart").getKendoChart().saveAsPDF();
    });
  });
</script>

Comme vous pouvez l’imaginer, l’interface utilisateur Telerik pour les graphiques ASP.NET Core propose une large collection d’options pour chaque type de graphique. Par exemple, les graphiques en anneau et en secteurs ont un paramètre pour définir l’angle de départ du premier segment en anneau/secteur, les séries de graphiques ont des options pour définir des valeurs cibles pour les graphiques à puces, etc. Cependant, la configuration des graphiques est rapide et facile avec des extraits. Vous pouvez accéder aux extraits en installant le Interface utilisateur Telerik pour l’extension de productivité ASP.NET Core Visual Studio. Une fois installé, pour déclarer un chart HtmlHelper ou TagHelper, tapez « tc-chart » et choisissez la configuration souhaitée.

Dans le champ, tc-chart est tapé, avec des suggestions pour tc-chart-html, tc-chart-tag, tc-chartremotedata-html, tc-chartremotedata-tag

Les mêmes extraits sont disponibles pour Code Visual Studioaussi.

À ce stade, nous avons créé un graphique linéaire entièrement fonctionnel lié aux données en ligne. Courir cet échantillon REPL et l’examiner.

Conserver l’apparence et les options du graphique lors de l’exécution

Dans le monde réel, nous devons souvent personnaliser le graphique de manière dynamique en fonction de certaines conditions. Heureusement, le Interface utilisateur Telerik pour les graphiques ASP.NET Core sont entièrement flexibles. Vous avez la liberté d’ajuster toutes les options après l’initialisation.

Je vais démontrer plusieurs scénarios de cas d’utilisation :

Filtrer les données

Comment filtrer les données dans le graphique ? L’utilisateur sélectionne une plage de valeurs (par exemple, des années), et les catégories et les séries de données du graphique sont mises à jour automatiquement en fonction de la sélection de l’utilisateur.

  1. Créer un Curseur de plage composant et gérer son Modifier l’événement:
<label for="slider">Select chart categories:</label>
@(Html.Kendo().RangeSlider()
  .Name("slider")
  .Min(2018)
  .Max(2022)
  .LeftDragHandleTitle("Drag to select start year")
  .RightDragHandleTitle("Drag to select end year")
  .Tooltip(tooltip => tooltip.Format("{0}").Template("Between #=selectionStart# and #=selectionEnd#"))
  .HtmlAttributes(new {style = "width: 300px;" })
  .Events(ev => ev.Change("onYearsRangeChange"))
)
<script>
  function onYearsRangeChange(e) {
    let startValue = e.value[0]; 
    let endValue = e.value[1];  
    let minValue = e.sender.options.min; 
    let maxValue = e.sender.options.max; 
  }
</script>
  1. Filtrez les catégories du graphique et les collections de séries en fonction des années de début/fin choisies et déclenchez le côté client méthode redessiner(). De cette façon, le graphique sera redessiné avec les nouvelles données.
<script>
  var initialChartSeries = [
    [21560, 10548, 12548, 47526, 10254], //Product A
    [10258, 36985, 45287, 23568, 35982] //Product B
  ];
  var initialChartCategories = ["2018", "2019", "2020", "2021", "2022"];
  function onYearsRangeChange(e) {
    let startValue = e.value[0];
    let endValue = e.value[1];
    let minValue = e.sender.options.min;
    let maxValue = e.sender.options.max;
    let chart = $("#chart").getKendoChart(); //Get a reference to the chart
    let updatedChartSeries = chart.options.series; //Access the current chart’s series
    let updatedCategories = $.grep(initialChartCategories, function(value) { //Filter the current chart’s categories based on the selected years
      return (value >= startValue && value <= endValue);
    });
    for(var i = 0; i < updatedChartSeries.length; i++) { //Loop through the chart series and update them based on the selected years
      let newRangeSeries = $.grep(initialChartSeries[i], function(value,index) {
        return index >= (startValue - minValue) && index < initialChartSeries[i].length - (maxValue - endValue);
      });
      updatedChartSeries[i].data = newRangeSeries;
    }
    chart.options.categoryAxis.categories = updatedCategories; //Set the new categories
    chart.options.series = updatedChartSeries; //Set the new data series
    chart.redraw(); //Redraw the chart with the updated dataset
  }
</script>

Filtrage des données côté serveur

Lorsque le graphique est configuré pour la liaison de données à distance, vous pouvez filtrer l’ensemble de données côté serveur :

  1. Passez les années de début/fin choisies comme paramètres supplémentaires de la requête Read de la DataSource :
function onYearsRangeChange(e) {
  let startValue = e.value[0];
  let endValue = e.value[1];
  let minValue = e.sender.options.min;
  let maxValue = e.sender.options.max;
  let chart = $("#chart").getKendoChart();
  chart.dataSource.read({ start: startValue, end: endValue }); 
}
  1. Filtrez la collecte de données sur le serveur :
[HttpPost]
public IActionResult ReadChartData(int start, int end)
{
  if(start != 0 && end !=0)
  {
    var filteredData = GetChartData().Where(x => x.Year >= start && x.Year <= end);
    return Json(filteredData);
  }
  return Json(GetChartData());
}

En conséquence, le graphique charge les nouvelles données reçues du serveur.

Modification des paramètres de graphique lors de l’exécution

Comment pouvez-vous modifier les paramètres du graphique lors de l’exécution ? Par exemple, vous pouvez afficher/masquer dynamiquement les libellés des séries en fonction des préférences de l’utilisateur :

  1. Créer un Commutateur composant et gérer son Modifier l’événement:
<label for="switch">Show/Hide data series labels:</label>
@(Html.Kendo().Switch()
  .Name("switch")
  .Messages(c => c.Checked("Yes").Unchecked("No"))
  .Events(ev => ev.Change("onSwitchChange"))
)
  1. Obtenez une référence au graphique initialisé et activez ses étiquettes de série à l’aide de la setOptions() méthode:
function onSwitchChange(e) {
  let chart = $("#chart").getKendoChart();
  chart.setOptions({
    seriesDefaults: {
      line: {
        labels: { visible: e.checked }
      }
    }
  });
}

Voici un échantillon REPL où vous pouvez tester ces exemples. En outre, il montre comment vous pouvez facilement modifier les couleurs de la série de données via
Pipette à couleurs éditeurs.

Charger de nouvelles données

Comment pouvez-vous charger un ensemble de données totalement différent dans un graphique déjà rendu en un seul clic ? Ce scénario peut être facilement géré avec le setDataSource() méthode:


@(Html.Kendo().Button()
  .Name("setNewDataButton")
  .Content("Load new dataset")
  .Events(ev => ev.Click("onClick"))
)
<script>
  function onClick(e) {
    let chartWidget = $("#chart").data("kendoChart");
    var dataSource = new kendo.data.DataSource( { 
    transport: {
      read: {
        url: '@Url.Action("GetNewChartData", "Home")',
        dataType: "json"
      }
    }
  });
  chartWidget.setDataSource(dataSource);
}
</script>


[HttpPost]
public IActionResult GetNewChartData()
{
  return Json(GetChartData());
}

En plus de cela, l’interface utilisateur Telerik pour ASP.NET Core Chart est entièrement personnalisable. Vous pouvez implémenter des visualisations personnalisées pour les éléments de légende du graphique, les titres d’axe, les étiquettes, les marqueurs et les séries en utilisant le Bibliothèque de dessins de Kendo.

Intégrer le graphique dans d’autres composants de l’interface utilisateur

Dans la plupart des cas, vous devrez intégrer le graphique dans d’autres composants de l’interface utilisateur. Selon le composant dans lequel vous souhaitez intégrer le graphique, vous pouvez déclarer le graphique directement dans la configuration du composant. Prendre la TabStripPar exemple:

@(Html.Kendo().TabStrip()
  .Name("tabstrip")
  .Items(tabstrip =>
  {
    tabstrip.Add().Text("Population")
    .Selected(true)
    .Content(@<text>
      @(Html.Kendo().Chart<Kendo.Mvc.Examples.Models.Chart.MarriagesDivorcesData>()
      .Name("chart1")
      .Theme("sass")
      .Legend(false)
      .DataSource(ds => ds.Read(read => read
        .Action("_MarriagesDivorcesStats", "Bubble_Charts")
      ))
      .Series(series => {
        series.Bubble(
          model => model.Marriages,
          model => model.Divorces,
          model => model.Population,
          model => model.State
        );
      })
      .XAxis(axis => axis
        .Numeric()
        .Labels(labels => labels
          .Format("{0:N0}")
        )
        .Title("Marriages per 1,000 population")
      )
      .YAxis(axis => axis
        .Numeric()
        .Labels(labels => labels
          .Format("{0:N0}")
        )
        .Title("Divorces per 1,000 population")
      )
      .Tooltip(tooltip => tooltip
        .Visible(true)
        .Format("{3}: Population {2:N0}")
      )
    )
    </text>);
    tabstrip.Add().Text("Electricity production").Content(…);
  })
)

Ce Échantillon REPL présente cet exemple d’intégration.

Un autre scénario d’intégration courant consiste à utiliser le graphique à l’intérieur des composants de mise en page :Tilelyout, StackLayout, Séparateuretc.

L’exemple ci-dessous montre comment intégrer un graphique Donut dans un StackLayout :

@(Html.Kendo().StackLayout()
  .Name("stacklayout")
  .Spacing("15px")
  .Orientation(StackLayoutOrientation.Horizontal)
  .HorizontalAlign(HorizontalAlign.Stretch)
  .VerticalAlign(VerticalAlign.Stretch)
  .Items(i=>{
    i.Add().Content(@<text>
      <div class="k-card k-flex-30">
        <div class="k-card-body">
          @(Html.Kendo().Chart()
          .Name("chart")
          .Title("What is you favourite sport?")
          .Legend(legend => legend
            .Position(ChartLegendPosition.Top)
          )
          .Series(series => {
            series.Donut(new dynamic[] {
              new {category = "Football",value = 35},
              new {category = "Basketball",value = 25},
              new {category = "Volleyball",value = 20},
              new {category = "Rugby",value = 10},
              new {category = "Tennis",value = 10}
            });
          })
          .Tooltip(tooltip => tooltip
            .Visible(true)
            .Template("#= category # - #= kendo.format('{0:P}', percentage) #")
          ))
        </div>
      </div>
    </text>);
  })
)

Courir cet échantillon REPL pour revoir la sortie.

Dans des scénarios plus complexes, où vous devez imbriquer plusieurs composants, une approche préférable consiste à utiliser un modèle. La plupart des composants de l’interface utilisateur Telerik prennent en charge les options de modèles qui acceptent en ligne ou externes Modèles d’interface utilisateur de Kendo ou des vues partielles.

En utilisant des modèles, vous pouvez réutiliser, par exemple, une vue partielle dans plusieurs composants et pages d’application.

@(Html.Kendo().TileLayout()
  .Name("tilelayout")
  .Columns(1)
  .Containers(c =>
  {
    c.Add().Header(h => h.Text("Weather conditions chart"))
    .BodyTemplateView(Html.Partial("../Shared/_ChartView")); 
  })
.Reorderable()
.Resizable()
)

Et vous voici la vue partielle « _ChartView.cshtml » avec le composant graphique imbriqué. N’oubliez pas de régler le .ToClientTemplate() lors de la définition du graphique dans un modèle.

@{
  Layout = null;
}
@(Html.Kendo().Chart()
  .Name("chart")
  .Title("Average Weather Conditions")
  .Series(series =>
  {
    series.RangeColumn(new  double[][] {
      new  double[] {5, 11}, new  double[] {5, 13}, new  double[] {7, 15}, new  double[] {10, 19}, new  double[] {13, 23}, new  double[] {17, 28},
      new  double[] {20, 30}, new  double[] {20, 30}, new  double[] {17, 26}, new  double[] {13, 22}, new  double[] {9, 16}, new  double[] {6, 13}
    });
  })
  .CategoryAxis(axis => axis
    .Categories("January", "February", "March", "April", "May", "June",
      "July", "August", "September", "October", "November", "December")
  )
  .Tooltip(tooltip => tooltip.Visible(true))
  .ToClientTemplate()
)

Essayez l’interface utilisateur Telerik pour les graphiques ASP.NET Core aujourd’hui

Vous voulez commencer à tirer parti des graphiques ASP.NET Core, ou de l’un des plus de 110 autres composants prêts à l’emploi, comme la grille de données ou le planificateur ? Commencez un essai gratuit aujourd’hui et découvrez par vous-même que la création d’applications interactives riches en deux fois moins de temps n’est pas un conte de fées.

Partager c’est aimer

Une fois que vous avez essayé les composants du graphique, n’oubliez pas de partager votre expérience et votre opinion dans les sections de commentaires ci-dessous ou en visitant le Interface utilisateur Telerik pour le portail de commentaires d’ASP.NET Core. Votre contribution fait la différence !

Le meilleur outil 2023 pour ta croissance Instagram !



Source link