webentwicklung-frage-antwort-db.com.de

Zeichnen von Diagrammen in ASP.NET MVC 4-Websites (Razor, C #)

Ist es möglich, Diagramme (Kurven, Histogramme, Kreise) mit C # über ASP.NET MVC 4 (Razor) zu zeichnen? Ich versuche, einige Grafiken aus Daten zu erstellen, die aus meiner Datenbank extrahiert wurden. Aber ich kann nicht finden, wie.

Irgendwelche Vorschläge bitte?

Vielen Dank !

22
user3212730

Es gibt einen Diagramm-Helfer , der sehr gut mit Razor zusammenarbeitet und es Ihnen ermöglicht, ganz einfach Diagramme, Histogramme und andere grafische Darstellungen Ihrer Daten zu erstellen.

Oder Sie könnten versuchen, eine jQuery/HTML5/Javascript-Bibliothek zu verwenden:

  • Highcharts ist eine Diagrammbibliothek, die in reinem HTML5/JavaScript geschrieben ist und intuitive, interaktive Diagramme für Ihre Website oder Webanwendung bietet.

  • jqPlot ist ein Plot- und Charting-Plugin für das jQuery Javascript Framework.

  • Raphaël ist eine kleine JavaScript-Bibliothek, die Ihnen die Arbeit mit Vektorgrafiken im Web erleichtern soll.

Es gibt mehr von ihnen, die oben genannten sind nur einige Beispiele;

33
Paweł Bejger

Wenn Sie Ihre Daten in grafischer Form anzeigen möchten, können Sie den Diagramm-Helfer verwenden. Der Diagramm-Helfer kann ein Bild rendern, das Daten in einer Vielzahl von Diagrammtypen anzeigt.

Sie können wie folgt eine Ansicht mit einem Rasiermesser-Code für ein Diagramm erstellen (sagen wir, die Datei MyChart.cshtml).

Balkendiagramm aus Array mit Thema

@{
    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();
}

Kreisdiagramm aus 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();
}

Kreisdiagramm von Array mit Thema

@{
    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();
}

Balkendiagramm mit DB-Abfrage

@{
    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();
}

Sie können diese Diagrammansichten/PartialView als Quellbild verwenden, wo immer dies erforderlich ist.

ex.

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

Kartentheams

Vanille Zeigt rote Spalten auf weißem Hintergrund an.

Bla Zeigt blaue Spalten auf einem blauen Hintergrund mit Farbverlauf an.

Grün Zeigt blaue Spalten auf einem grünen Hintergrund mit Farbverlauf an.

Gelb Zeigt orangefarbene Spalten auf gelbem Hintergrund mit Farbverlauf an.

Vanilla3D Zeigt rote 3D-Spalten auf weißem Hintergrund an.

Die SeriesChartType-Enumeration unterstützt Folgendes:

  1. Bereich
  2. Bar
  3. Box-Plot
  4. Blase
  5. Leuchter
  6. Säule
  7. Krapfen
  8. ErrorBar
  9. Schnelle Linie
  10. FastPoint
  11. Trichter
  12. Kagi
  13. Linie
  14. Kuchen
  15. Punkt
  16. PointAndFigure
  17. Polar
  18. Pyramide
  19. Radar
  20. Reichweite
  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. Lager
  35. ThreeLineBreak

Dies ist die Liste der Namen, die Sie als Zeichenfolgen an den Chart-Helfer auf einer Razor-Seite übergeben können.

Das ist Helfer

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");
    }
}

Hoffe das wird dir helfen.

33
Pranav Labhe

Sie können Amcharts mit Javascript testen. Es ist so nützlich ..

https://www.amcharts.com/

0
mcgrawhill