[NaSzybko] Wykresy w .NET Core

Dzisiaj na szybko postaram się wytłumaczyć jak dodać wykresy do naszej aplikacji .NET Core MVC za pomocą biblioteki Highcharts. Zapraszam do czytania.

 


NuGet

 

Zaczynamy od dodania paczki do naszego projektu. Oficjalne paczki od HighSoft są przeznaczone na ASP.NET MVC i nie działają z .NET Core. Na szczęście jakaś dobra dusza pod nickiem pmrozek stworzyła wersję na Core. Znajduje się ona tutaj: NuGet a zainstalować ją można np. poprzez komendę Install-Package Highsoft.Web.Mvc. Po dodaniu pakietu jesteśmy gotowi do pracy.

 


Przykładowy kod kontrolera

 

W kontrolerze jedyne co musimy zrobić to dodać dane które będziemy wyświetlać na wykresie. Możemy tu też ustalić np. kolor słupka. Dane te to obiekty klasy , np. w przypadku wykresu kołowego jest to PieSeriesData a dodajemy je do zwykłej listy którą przekazujemy do widoku poprzez ViewData. Aby nowe klasy były rozpoznane należy dodać referencję do przestrzeni nazw:

using Highsoft.Web.Mvc.Charts;

 

Przykładowy kod:

List<PieSeriesData> pieData = new List<PieSeriesData>();

pieData.Add(new PieSeriesData
{
    Name = “Wydano”,
    Y = percentage,
    Sliced = true,
    Color="white"
);
pieData.Add(new PieSeriesData
{
    Name = "Plan",
    Y = 100-percentage,
    Sliced = true,
    Color="#222"
});
ViewData["pieData"] = pieData;

Jak widać tworzymy listę obiektów a następnie dodajemy do niej dane. Parametr Name jak sama nazwa wskazuje oznacza nazwę sekcji po najechaniu kursorem:

 

 

Parametr Y oznacza wartość, Sliced w przypadku wykresu kołowego oznacza “wysunięcie” danego wycinka, natomiast Color definiuje kolor danego wycinka, jak widać można przekazywać wartości poprzez nazwy popularnych kolorów oraz wartości hex, tak jak ma to miejsce w CSS.

 


Widok

 

W widoku podobnie jak w kontrolerze należy dodać przestrzeń nazw @using Highsoft.Web.Mvc.Charts aby móc skorzystać z nowego znacznika.

@(Html.Highsoft().Highcharts(
    new Highcharts
    {
         Chart = new Chart
         {
              BackgroundColor=null,
              PlotBackgroundColor = null,
              PlotBorderWidth = null,
              PlotShadow = new Shadow
              {
                   Enabled = false
              }
         },
         Title = new Title
         {
              Text = "Tytuł wykresu"
         },
         Tooltip = new Tooltip
         {
               PointFormat = "{series.name}: <b>{point.percentage:.1f}%</b>"
         },
         PlotOptions = new PlotOptions
         {
                Pie = new PlotOptionsPie
                {
                     BorderColor = null,
                     AllowPointSelect = true,
                     Cursor = PlotOptionsPieCursor.Pointer,
                     DataLabels = new PlotOptionsPieDataLabels
                     {
                          Distance = -35,
                          Enabled = true,
                          Format = "{point.percentage:.1f} %",
                          Style = new Hashtable
                          {
                               {
                                    "fontWeight",
                                    "normal"
                                },
                                {
                                    "textOutline",
                                    "false"
                                 }
                          }
                      },
                      ShowInLegend = false
                 }
           },          
           Series = new List<Series>
           {                    
                 new PieSeries
                 {                    
                      Name = "Usage",
                      Data = @ViewData["pieData"] as List<PieSeriesData>
                 },
           }
    }
, "chart"))

 

Jak widać sam kod to najzwyklejsze ustawienia wyglądu wykresu. Zaczynając od początku możemy zmienić: ogólny wygląd okna z wykresem, tytuł, opis po najechaniu kursorem na dany fragment oraz ich wygląd, dane wykresu. Przy dodawaniu kilku wykresów na jednej stronie należy zwrócić uwagę na ostatni parametr, tutaj nazwany “chart”. Jest to swego rodzaju id wykresu i musi być unikalne. Dane które tworzyliśmy w kontrolerze przypisujemy do wartości „Data” w sekcji Series. Należy pamiętać, aby rzutować ViewData na listę.

Opcji do personalizacji wykresu jest sporo, trzeba trochę pokombinować, żeby zobaczyć jak to wszystko działa. Nie będę opisywać poszczególnych parametrów, od tego jest dokumentacja, którą znajdziecie tutaj.

 

 


Wady i zalety

 

Highcharts to bardzo popularna biblioteka. Jej główna wersja to wersja javascriptowa, co powoduje, że szukając jakiejkolwiek pomocy natykamy się raczej na opisy w JS. Często to wystarcza, ale np. w przypadku szukania podpowiedzi jak zmienić cień wokół napisów na wykresie miałem problem z przeniesieniem kodu JS na C#. Dokumentacja sama w sobie również jest uboga, bo jest to tylko opis klas. Z pomocą mi przyszedł otwarty kod paczki o której pisałem na samym początku. Znalazłem tam domyślne przypisanie wartości i udało się zmienić to co chciałem.

Highcharts posiada w swojej ofercie bardzo dużo różnych typów wykresów. Są one często bardzo zaawansowane i myślę, że każdy znajdzie coś dla siebie. Cała lista znajduje się tutaj.

Biblioteka jest darmowa do projektów niekomercyjnych.

 


Podsumowanie

 

Highcharts oferuje bardzo zaawansowany mechanizm dodawania wykresów do naszego projektu. Mnogość opcji oraz typów wykresów powoduje, że jest to biblioteka którą na pewno warto brać pod uwagę jeżeli zastanawiamy się co wybrać w naszym projekcie. Boli jedynie słaba dokumentacja dla wersji .NET.

Na dzisiaj to tyle, dajcie znać czy podoba Wam się ten format, wszelkie sugestie z chęcią wezmę pod uwagę.

Do zobaczenia, cześć!

1 komentarz

  1. Fajna sprawa. Może skorzystam u siebie. Pozdrawiam;)

Dodaj komentarz