web-dev-qa-db-fra.com

dessin de graphiques dans des sites Web ASP.NET MVC 4 (Razor, C #)

Est-il possible de dessiner des graphiques (courbes, histogramme, cercle) en utilisant C # via ASP.NET MVC 4 (Razor). J'essaie de créer des graphiques à partir de données extraites de ma base de données. Mais je ne trouve pas comment.

Des suggestions, s'il vous plaît?

Merci beaucoup !

c#asp.net-mvcasp.net-mvc-4razorcharts
22
user3212730

Il y a un Assistant graphique , qui fonctionne assez bien avec Razor et vous permet de créer des graphiques, des histogrammes et d'autres représentations graphiques de vos données assez facilement.

Ou vous pouvez essayer d'utiliser une bibliothèque jQuery/HTML5/Javascript:

  • Highcharts est une bibliothèque de graphiques écrite en pur HTML5/JavaScript, offrant des graphiques intuitifs et interactifs à votre site Web ou à votre application Web.

  • jqPlot est un plugin de traçage et de cartographie pour le framework Javascript jQuery.

  • Raphaël est une petite bibliothèque JavaScript qui devrait simplifier votre travail avec des graphiques vectoriels sur le web.

Il y en a plus, ceux ci-dessus ne sont que quelques exemples;

33
Paweł Bejger

Lorsque vous souhaitez afficher vos données sous forme graphique, vous pouvez utiliser l'aide graphique. L'assistant Graphique peut rendre une image qui affiche des données dans divers types de graphiques.

Vous pouvez créer une vue ayant un code de rasoir pour le graphique comme suit (disons son MyChart.cshtml).

Graphique à barres d'Array avec thème

@{
    var myChart = new Chart(width: 600, height: 400, theme: ChartTheme.Green)
        .AddTitle("Chart Title")
        .AddSeries(
            name: "ChartTitle",
            xValue: new[] {  "Col1", "Col2", "Col3", "Col4", "Col5" },
            yValues: new[] { "2", "6", "4", "5", "3" })
        .Write();
}

Graphique circulaire de Array

@{
    var myChart = new Chart(width: 600, height: 400, theme: ChartTheme.Green)
        .AddTitle("Chart Title")
        .AddSeries(
            name: "ChartTitle",
            chartType: "Pie",
            xValue: new[] {  "Col1", "Col2", "Col3", "Col4", "Col5" },
            yValues: new[] { "2", "6", "4", "5", "3" })
        .Write();
}

Graphique circulaire de Array avec thème

@{
    var myChart = new Chart(width: 600, height: 400)
        .AddTitle("Chart Title")
        .AddSeries(
            name: "ChartTitle",
            chartType: "Pie",
            xValue: new[] {  "Col1", "Col2", "Col3", "Col4", "Col5" },
            yValues: new[] { "2", "6", "4", "5", "3" })
        .Write();
}

Graphique à barres à l'aide d'une requête DB

@{
    var db = Database.Open("DBName");
    var data = db.Query("SELECT Col1, Col2 FROM Table");
    var myChart = new Chart(width: 600, height: 400)
        .AddTitle("Chart Title")
        .DataBindTable(dataSource: data, xField: "Col1")
        .Write();
}

Vous pouvez utiliser ces vues de graphique/PartialView lorsque cela est nécessaire en tant que src d'image.

ex.

<html>
    <body>
         <img src="MyChart.cshtml" />
         <!-- or <img src='@Url.Action("Controler","ActionNameOfChartRenderingView")' />-->
    <body>
<html>

Graphique Theams

Vanille Affiche des colonnes rouges sur fond blanc.

Ble Affiche les colonnes bleues sur un fond dégradé bleu.

Vert Affiche les colonnes bleues sur un fond dégradé vert.

Jaune Affiche les colonnes orange sur un fond dégradé jaune.

Vanilla3D Affiche les colonnes rouges 3D sur un fond blanc.

L'énumération SeriesChartType prend en charge les éléments suivants:

  1. Région
  2. Bar
  3. BoxPlot
  4. Bulle
  5. Chandelier
  6. Colonne
  7. Donut
  8. Barre d'erreur
  9. Voie rapide
  10. FastPoint
  11. Entonnoir
  12. Kagi
  13. Ligne
  14. Tarte
  15. Point
  16. PointAndFigure
  17. Polaire
  18. Pyramide
  19. Radar
  20. Gamme
  21. RangeBar
  22. RangeColumn
  23. Renko
  24. Spline
  25. SplineArea
  26. SplineRange
  27. StackedArea
  28. StackedArea100
  29. StackedBar
  30. StackedBar100
  31. StackedColumn
  32. StackedColumn100
  33. StepLine
  34. Stock
  35. ThreeLineBreak

Il s'agit de la liste des noms que vous pouvez passer, sous forme de chaînes, à l'assistant Graphique dans une page Razor.

C'est Helper

namespace System.Web.Helpers
{
    public class Chart
    {
        public Chart(int width, int height, string template = null, string templatePath = null);
        public string FileName { get; }
        public int Height { get; }
        public int Width { get; }
        public Chart AddLegend(string title = null, string name = null);
        public Chart AddSeries(string name = null, string chartType = "Column", string chartArea = null, string axisLabel = null, string legend = null, int markerStep = 1, IEnumerable xValue = null, string xField = null, IEnumerable yValues = null, string yFields = null);
        public Chart AddTitle(string text = null, string name = null);
        public Chart DataBindCrossTable(IEnumerable dataSource, string groupByField, string xField, string yFields, string otherFields = null, string pointSortOrder = "Ascending");
        public Chart DataBindTable(IEnumerable dataSource, string xField = null);
        public byte[] GetBytes(string format = "jpeg");
        public static Chart GetFromCache(string key);
        public Chart Save(string path, string format = "jpeg");
        public string SaveToCache(string key = null, int minutesToCache = 20, bool slidingExpiration = true);
        public Chart SaveXml(string path);
        public Chart SetXAxis(string title = "", double min = 0, double max = 0.0 / 0.0);
        public Chart SetYAxis(string title = "", double min = 0, double max = 0.0 / 0.0);
        public WebImage ToWebImage(string format = "jpeg");
        public Chart Write(string format = "jpeg");
        public static Chart WriteFromCache(string key, string format = "jpeg");
    }
}

J'espère que ceci vous aidera.

33
Pranav Labhe

Vous pouvez essayer des amcharts avec javascript. C'est tellement utile ..

https://www.amcharts.com/

0
mcgrawhill