webentwicklung-frage-antwort-db.com.de

Diagramm in ASP.Net MVC 3 

Ich verwende den Chart-Web-Helfer in ASP.Net MVC 3. Ich habe im Internet eine Reihe glänzender Bilder gesehen, die die Möglichkeiten dieser API zeigen, aber es gibt kaum eine Dokumentation, wie die Diagramme formatiert werden. Zum Beispiel muss ich Beschriftungen außerhalb des Diagramms anzeigen. Ich möchte Prozentwerte angeben anstatt Dezimalwerte usw. 

Es gibt ein Webforms-Projekt zum Download: http://weblogs.asp.net/scottgu/archive/2010/02/07/built-in-charting-controls-vs-2010-and-net-4-series. aspx und sehr einfache Klassendokumentation, die erklärt, wie Werte zugewiesen und grundlegende Dimensionen festgelegt werden.

Ich verstehe, dass auf MVC 3 noch keine Bücher veröffentlicht wurden, aber es sollte doch eine Dokumentation geben, in der erklärt wird, wie das Tool verwendet wird.

Vielen Dank

EDIT:

Nach dem, was ich gelesen habe, hat ASP.Net MVC 3 entweder einen Schritt zurück mit dem Diagrammwerkzeug gemacht, indem die Fähigkeit zum Stilieren von Diagrammen entfernt wurde, oder es wurde überhaupt nicht dokumentiert. Ist in diesem Artikel durchgegangen: http://forums.asp.net/t/1620783.aspx/1?ASP+NET+MVC+3+Beta+Chart+Helper+Styling+Please+Help+ , eine sehr ähnliche Problem wird dort beschrieben. 

EDIT 2: Es scheint, dass Microsoft die MSCharts-Funktionalität in MVC 3 teilweise implementiert hat. Um MSCharts verwenden zu können, muss die System.Web.DataVisualization-Assembly in der Datei web.configuration importiert und registriert werden . T

Auf diese Weise werden Anforderungen aus der Sicht an die Steuerungen gesendet. Controller generieren ein Bild eines Graphen und geben ein Bildergebnis zurück. Das Ergebnis wird dann in der Ansicht angezeigt. Dies ist nützlich, da es eine Art Trennung bietet. Ich verstehe immer noch nicht, warum System.WebHelpers.Chart diese Funktionalität nicht bereits bietet, aber hoffentlich wird es in naher Zukunft angesprochen. 

EDIT 3: Ein paar Punkte mehr zu machen. Konstruieren Sie Ihre Diagramme nicht in der Ansicht - sie sollten von einem Controller bereitgestellt werden. Wenn Sie sich dazu entschließen, Ansichten zum Erstellen von Diagrammen zu verwenden, müssen Sie die Datei "web.config" im Ordner "Views" so aktualisieren, dass <add namespace="System.Web.UI.DataVisualization"/> in den Namespace-Abschnitt eingefügt wird. Namen von Assemblys und Namespaces sind leicht verwirrend. Die Assembly heißt: System.Web.DataVisualization, wenn der Namespace als System.Web.UI.DataVisualization bezeichnet wird. Schließlich finde ich, dass die API für das Charting großartig ist, sie dient Bildern und bedeutet, dass Diagramme von allen Webbrowsern aus zugänglich sind. Die Qualität der Charts ist großartig. Ich habe mir Alternativen wie Fusion-Charts, HighCharts und einige andere jQuery/JavaScript/Flash-basierte Diagramme angesehen. Sie alle versuchen, 300 bis 1000 Pfund von Ihnen zu nehmen, ohne die Grundbedürfnisse der Entwickler zu befriedigen. 

21
user338195

Die Diagrammsteuerelemente basieren auf einem zuvor separaten Projekt namens MS Chart. 

Alex Gorevs Blog (MSFT-Leiter des Projekts): http://blogs.msdn.com/b/alexgor/

MS Chart-Foren: http://social.msdn.Microsoft.com/Forums/en-US/MSWinWebChart/

Dokumentation auf MSDN: http://msdn.Microsoft.com/de-de/library/dd456632(VS.100).aspx

Die Beiträge scheinen etwas veraltet zu sein, aber die API ist zwischen MS Chart und den neuen Datenvisualisierungsbibliotheken ziemlich gleich.

Um Ihre Beispielfragen zu beantworten:

1) Um Beschriftungen außerhalb des Diagramms anzuzeigen, verfügt jedes Seriesname__-Objekt über ein Dictionary-Array mit Eigenschaften.

series["PieLabelStyle"] = "Outside";

2) Zur Angabe von Prozentwerten anstelle von Rohwerten nimmt die Label-Eigenschaft des Seriesname__-Objekts eine Formatierungszeichenfolge an.

series.Label = "#PERCENT{P0}"

Diese benutzerdefinierten Attribute sind ausführlich unter http://msdn.Microsoft.com/en-us/library/dd456764.aspx verfügbar.

BEARBEITEN: Code-Beispiel hinzufügen

Okay, hier ist ein vollständiger Codebeispiel. Ich verwende System.Web.DataVisualization v4.0.0.0, daher sollte dies mit MVC 3 aktuell sein. Der oben angegebene seriesist nicht die tatsächlichen Chart.Series-Eigenschaften (das ist ein SeriesCollectionname__). Es ist die einzelne seriesname__, die Sie zu dieser Sammlung hinzufügen.

public ActionResult TestForSOExample()
{
  // slug in some data
  var data = new Dictionary<string, float>
        {
            {"test", 10.023f},
            {"test2", 20.020f},
            {"test3", 19.203f},
            {"test4", 4.039f},
            {"test5", 5.343f}
    };


  var chart = new Chart();

  var area = new ChartArea();
  // configure your chart area (dimensions, etc) here.
  chart.ChartAreas.Add(area);

  // create and customize your data series.
  var series = new Series();
  foreach (var item in data)
  {
        series.Points.AddXY(item.Key, item.Value);
    }
  series.Label = "#PERCENT{P0}";
  series.Font = new Font("Segoe UI", 8.0f, FontStyle.Bold);
  series.ChartType = SeriesChartType.Pie;
  series["PieLabelStyle"] = "Outside";

  chart.Series.Add(series);

  var returnStream = new MemoryStream();
  chart.ImageType = ChartImageType.Png;
  chart.SaveImage(returnStream);
  returnStream.Position = 0;
  return new FileStreamResult(returnStream, "image/png");
}

Wenn Sie die Aktion des Controllers aufrufen, werden folgende Bilder angezeigt.

example image from controller action

35

Ich würde empfehlen, Diagramme auf dem Client zu rendern, statt auf dem Server zu machen, Server sollte eigentlich zum Abrufen der Daten verwendet werden. Ich würde smth wie google charts dafür verwenden. Wenn Sie sich jedoch wirklich dafür entschieden haben, Diagramme vom Server zu ziehen, um die Bilder spezifisch zu machen, verwenden Sie am besten den oben genannten Ansatz - Diagrammklasse. Ein Nachteil dieses Ansatzes ist jedoch, dass es dafür keinen Designer gibt. Wenn Sie jedoch die WinForms-App erstellen und das Diagrammsteuerelement ziehen, ist es genau das Gleiche, und es gibt einen Designer für Sie Sie müssen Designer-generierten Code kopieren/einfügen und ggf. Verarbeitungslogik schreiben. Das macht das Leben viel einfacher.

0
Marcello