OK grafico linea non stepped

2022-02-25 11:59:49 +01:00
parent f0beaaacc8
commit 8e5a392c8c
3 changed files with 104 additions and 12 deletions
@@ -0,0 +1,93 @@
+@using MP.Data
+@inject IJSRuntime JSRuntime
+
+<canvas id="@Id"></canvas>
+
+@code {
+
+    [Parameter]
+    public string Id { get; set; } = "MyTs";
+
+    [Parameter]
+    public List<chartJsData.chartJsTSerie> DataTS { get; set; } = null!;
+
+    [Parameter]
+    public string lineColor { get; set; } = "";
+    [Parameter]
+    public string backColor { get; set; } = "";
+    [Parameter]
+    public int lTens { get; set; } = 0;
+
+    /// <summary>
+    /// Inizializzazione rendering componente
+    ///
+    /// partendo da qui:
+    /// https://www.williamleme.com/posts/2020/003-chartjs-blazor/
+    /// https://www.puresourcecode.com/dotnet/blazor/using-chart-js-with-blazor/
+    /// https://www.tutorialsteacher.com/csharp/csharp-anonymous-type
+    /// </summary>
+    /// <param name="firstRender"></param>
+    /// <returns></returns>
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        //if (!firstRender)
+        //{
+        await renderChart();
+        //}
+    }
+
+    /// <summary>
+    /// Inizializzazione rendering componente
+    ///
+    /// partendo da qui:
+    /// https://www.williamleme.com/posts/2020/003-chartjs-blazor/
+    /// https://www.puresourcecode.com/dotnet/blazor/using-chart-js-with-blazor/
+    /// https://www.tutorialsteacher.com/csharp/csharp-anonymous-type
+    /// </summary>
+    /// <param name="firstRender"></param>
+    /// <returns></returns>
+    protected async Task renderChart()
+    {
+        // creazione di un oggetto anonymous type con tutte le opzioni da passare a chart.js
+        var config = new
+        {
+            type = "line",
+            options = new
+            {
+                responsive = true,
+                scales = new
+                {
+                    yAxes = new
+                    {
+                        display = true,
+                        ticks = new
+                        {
+                            maxTicksLimit = 10
+                        }
+                    },
+                    xAxes = new
+                    {
+                        type = "timeseries",
+                        distribution = "linear",
+                    }
+                }
+            },
+            data = new
+            {
+                datasets = new[]
+                {
+                    new
+                    {
+                        data = DataTS,
+                        borderColor= lineColor,
+                        backgroundColor= backColor,
+                        lineTension= lTens,
+                        stepped= false,
+                        label= "Temperatura Rilevata"
+                    }
+                }
+            }
+        };
+        await JSRuntime.InvokeVoidAsync("setup", Id, config);
+    }
+}