Laden...

Dynamische Menge an Graphen für einen Chart - Highchart

Erstellt von micha0827 vor 6 Jahren Letzter Beitrag vor 6 Jahren 1.205 Views
M
micha0827 Themenstarter:in
85 Beiträge seit 2015
vor 6 Jahren
Dynamische Menge an Graphen für einen Chart - Highchart

Hallo,

ich benutze Highchart um meine Daten in einer Grafik darzustellen. Der Teil in der View:


@(Html.Highsoft().Highcharts(
        new Highcharts
        {
            …
            Chart = new Chart
            {
                Width = 1087,
                Height = 400,
                Type = ChartType.Area
            },
            …
            Series = new List<Series>
            {                    
                new AreaSeries
                {
                    Name = "USA",
                    Data = @ViewData[" usaData & quot;] as List<AreaSeriesData>
                },
                new AreaSeries
                {
                    Name = "USSR/Russia",
                    Data = @ViewData[" russiaData & quot;] as List<AreaSeriesData>
                }
            }
        }
        , "chart")

und der Teil im Controller:


public ActionResult AreaBasic()
        {
            List<double?> usaValues = new List<double?> {
                null, null, null, null, null, 6, 11, 32, 110, 235, 369, 640,
                1005, 1436, 2063, 3057, 4618, 6444, 9822, 15468, 20434, 24126,
                27387, 29459, 31056, 31982, 32040, 31233, 29224, 27342, 26662,
                26956, 27912, 28999, 28965, 27826, 25579, 25722, 24826, 24605,
                24304, 23464, 23708, 24099, 24357, 24237, 24401, 24344, 23586,
                22380, 21004, 17287, 14747, 13076, 12555, 12144, 11009, 10950,
                10871, 10824, 10577, 10527, 10475, 10421, 10358, 10295, 10104 };
            List<double?> russiaValues = new List<double?> {
                null, null, null, null, null, null, null, null, null, null,
                5, 25, 50, 120, 150, 200, 426, 660, 869, 1060, 1605, 2471, 3322,
                4238, 5221, 6129, 7089, 8339, 9399, 10538, 11643, 13092, 14478,
                15915, 17385, 19055, 21205, 23044, 25393, 27935, 30062, 32049,
                33952, 35804, 37431, 39197, 45000, 43000, 41000, 39000, 37000,
                35000, 33000, 31000, 29000, 27000, 25000, 24000, 23000, 22000,
                21000, 20000, 19000, 18000, 18000, 17000, 16000 };
            List<AreaSeriesData> usaData = new List<AreaSeriesData>();
            List<AreaSeriesData> russiaData = new List<AreaSeriesData>();
            usaValues.ForEach(p => usaData.Add(new AreaSeriesData { Y = p }));
            russiaValues.ForEach(p => russiaData.Add(new AreaSeriesData { Y = p }));
            ViewData["usaData"] = usaData;
            ViewData["russiaData"] = russiaData;
            return View();
        }

Leider bekomme ich es nicht hin eine Variable Menge an Graphen zu übergeben. Eine For Schleife im View bringt Fehler mit den Klammern. Gibt es keinen Weg die Liste mit den Daten dynamisch im Controller zu füllen und dann an die View zu übergeben ? Ich würde gern auch mal 1 oder 3 Listen darstellen ohne dies vorher statisch angeben zu müssen.

Danke
Michael

16.806 Beiträge seit 2008
vor 6 Jahren

Klar geht das; musst es halt generisch umsetzen und nicht wie hier mit statischen Bezeichnern.
Dazu bietet es sich auch an ViewModels an die View zu übergeben und nicht mit ViewData, das statische Bezeichner braucht, zu arbeiten.

public class SeriesCountryViewItem
{
   public SeriesCountryViewItem(string countryName, List<double?> data)
}

public class SeriesViewModel
{
public List<SeriesCountryViewItem> SeriesCountryViewItems {get;set;
}

Dann halt das ViewModel füllen und

return View(<SeriesCountryViewItem>)

Sind aber eigentlich ASP.NET Basics 😉

PS: es gibt nur sehr sehr wenige legitime Fälle für ViewBag oder ViewData.
Für das Übertragen von Daten von Action zu Views ist es aber immer der falsche Weg.

PPS: dass Dein JavaScript das Double korrekt behandelt ist eher Zufall, weil Du auf der gleichen Maschine bist.
Wenn sich CultureInfo von Server und Client unterscheiden, dann kracht es aufgrund von Komma vs. Punkt.

M
micha0827 Themenstarter:in
85 Beiträge seit 2015
vor 6 Jahren

Hallo Abt,

vielen Dank. Ich denke aber dass ich die Klassen nicht neu definieren muss weil Sie schon vorgegeben sind im Highcharts.Net Paket. Ich habe das Beispiel nun meinem Code angepasst:


List<LineSeriesData> artikel1 = new List<LineSeriesData>();
List<LineSeriesData> artikel2 = new List<LineSeriesData>();

List<Series> keywords = new List<Series>();

foreach (var item in query1)
            {
           artikel1.Add(new LineSeriesData { X = DateToUTC(item.zeit), Y = item.position });
            }

 foreach (var item in query2)
            {
              artikel2.Add(new LineSeriesData { X = DateToUTC(item.zeit), Y = item.position });
            }

keywords.Add(new LineSeries { Name = "Knopfzelle Uhrenbatterie", Id = "Artikel1", Data = artikel1 });
keywords.Add(new LineSeries { Name = "Knopfzelle Uhrenbatterie", Id = "Artikel2", Data = artikel2 });

ViewData["Series"] = keywords;

Das funktioniert nun schon soweit dass ich in der View nichts mehr anfassen muss wenn ich die Menge der Linien ändern möchte. Leider ist die DB Abfrage noch nicht dynamisch von der Menge her. Wahrscheinlich ich dann eine Liste welche die Listen artikel1, artikel2 usw enthält ? Aber wie bekomme ich die ? Im Buch habe ich leider nichts dazu gefunden.

Michael

16.806 Beiträge seit 2008
vor 6 Jahren

Für Datenbanken gibts jetzt keine Antwort, die besagt "das funktioniert immer".
Musst halt schauen, wie man bei Deiner Datenbank und Deinem Schema die Daten dynamisch laden kann - ohne, dass die Security leidet.