Demo gestione array colori
This commit is contained in:
Samuele Locatelli
@@ -1,5 +1,125 @@
|
||||
|
||||
@using MP.Data
|
||||
@inject IJSRuntime JSRuntime
|
||||
|
||||
<canvas id="@Id"></canvas>
|
||||
|
||||
@code {
|
||||
[Parameter]
|
||||
public string Id { get; set; } = "MyHist";
|
||||
|
||||
[Parameter]
|
||||
public string Legenda { get; set; } = "Legenda";
|
||||
|
||||
[Parameter]
|
||||
public bool Horizontal { get; set; } = false;
|
||||
[Parameter]
|
||||
public string[]? Data { get; set; }
|
||||
|
||||
[Parameter]
|
||||
public string[]? Labels { get; set; }
|
||||
|
||||
[Parameter]
|
||||
public List<string> lineColor { get; set; } = new List<string>();
|
||||
[Parameter]
|
||||
public List<string> backColor { get; set; } = new List<string>();
|
||||
|
||||
protected override async Task OnAfterRenderAsync(bool 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, tipo verticale
|
||||
var config = new
|
||||
{
|
||||
type = "bar",
|
||||
options = new
|
||||
{
|
||||
responsive = true,
|
||||
scales = new
|
||||
{
|
||||
yAxes = new
|
||||
{
|
||||
suggestedMin = 0,
|
||||
display = true,
|
||||
ticks = new
|
||||
{
|
||||
beginAtZero = true,
|
||||
maxTicksLimit = 10
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
data = new
|
||||
{
|
||||
datasets = new[] {
|
||||
new {
|
||||
data = Data,
|
||||
borderColor = lineColor,
|
||||
backgroundColor = backColor,
|
||||
borderWidth = 1,
|
||||
label = Legenda
|
||||
}
|
||||
},
|
||||
labels = Labels
|
||||
}
|
||||
};
|
||||
// creazione di un oggetto anonymous type con tutte le opzioni da passare a chart.js, tipo verticale
|
||||
var configHor = new
|
||||
{
|
||||
type = "bar",
|
||||
options = new
|
||||
{
|
||||
indexAxis = "y",
|
||||
responsive = true,
|
||||
scales = new
|
||||
{
|
||||
yAxes = new
|
||||
{
|
||||
suggestedMin = 0,
|
||||
display = true,
|
||||
ticks = new
|
||||
{
|
||||
beginAtZero = true,
|
||||
maxTicksLimit = 10
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
data = new
|
||||
{
|
||||
datasets = new[] {
|
||||
new {
|
||||
data = Data,
|
||||
borderColor = lineColor,
|
||||
backgroundColor = backColor,
|
||||
borderWidth = 1,
|
||||
label = Legenda
|
||||
}
|
||||
},
|
||||
labels = Labels
|
||||
}
|
||||
};
|
||||
if (Horizontal)
|
||||
{
|
||||
await JSRuntime.InvokeVoidAsync("setup", Id, configHor);
|
||||
}
|
||||
else
|
||||
{
|
||||
await JSRuntime.InvokeVoidAsync("setup", Id, config);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,144 +0,0 @@
|
||||
using System;
|
||||
using System.Collections.Generic;
|
||||
using System.Linq;
|
||||
using System.Threading.Tasks;
|
||||
using Microsoft.AspNetCore.Components;
|
||||
using System.Net.Http;
|
||||
using Microsoft.AspNetCore.Authorization;
|
||||
using Microsoft.AspNetCore.Components.Authorization;
|
||||
using Microsoft.AspNetCore.Components.Forms;
|
||||
using Microsoft.AspNetCore.Components.Routing;
|
||||
using Microsoft.AspNetCore.Components.Web;
|
||||
using Microsoft.AspNetCore.Components.Web.Virtualization;
|
||||
using Microsoft.JSInterop;
|
||||
using MP.Stats;
|
||||
using MP.Stats.Shared;
|
||||
|
||||
namespace MP.Stats.Components.ChartJs
|
||||
{
|
||||
public partial class BarPlot
|
||||
{
|
||||
[Inject]
|
||||
IJSRuntime JSRuntime { get; set; }
|
||||
|
||||
[Parameter]
|
||||
public string Id { get; set; } = "MyHist";
|
||||
|
||||
[Parameter]
|
||||
public string Legenda { get; set; } = "Legenda";
|
||||
|
||||
[Parameter]
|
||||
public bool Horizontal { get; set; } = false;
|
||||
[Parameter]
|
||||
public string[]? Data { get; set; }
|
||||
|
||||
[Parameter]
|
||||
public string[]? Labels { get; set; }
|
||||
|
||||
[Parameter]
|
||||
public string lineColor { get; set; } = "";
|
||||
[Parameter]
|
||||
public string backColor { get; set; } = "";
|
||||
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, tipo verticale
|
||||
var config = new
|
||||
{
|
||||
type = "bar",
|
||||
options = new
|
||||
{
|
||||
responsive = true,
|
||||
scales = new
|
||||
{
|
||||
yAxes = new
|
||||
{
|
||||
suggestedMin = 0,
|
||||
display = true,
|
||||
ticks = new
|
||||
{
|
||||
beginAtZero = true,
|
||||
maxTicksLimit = 10
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
data = new
|
||||
{
|
||||
datasets = new[] {
|
||||
new {
|
||||
data = Data,
|
||||
borderColor = lineColor,
|
||||
backgroundColor = backColor,
|
||||
borderWidth = 1,
|
||||
label = Legenda
|
||||
}
|
||||
},
|
||||
labels = Labels
|
||||
}
|
||||
};
|
||||
// creazione di un oggetto anonymous type con tutte le opzioni da passare a chart.js, tipo verticale
|
||||
var configHor = new
|
||||
{
|
||||
type = "bar",
|
||||
options = new
|
||||
{
|
||||
indexAxis = "y",
|
||||
responsive = true,
|
||||
scales = new
|
||||
{
|
||||
yAxes = new
|
||||
{
|
||||
suggestedMin = 0,
|
||||
display = true,
|
||||
ticks = new
|
||||
{
|
||||
beginAtZero = true,
|
||||
maxTicksLimit = 10
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
data = new
|
||||
{
|
||||
datasets = new[] {
|
||||
new {
|
||||
data = Data,
|
||||
borderColor = lineColor,
|
||||
backgroundColor = backColor,
|
||||
borderWidth = 1,
|
||||
label = Legenda
|
||||
}
|
||||
},
|
||||
labels = Labels
|
||||
}
|
||||
};
|
||||
if (Horizontal)
|
||||
{
|
||||
await JSRuntime.InvokeVoidAsync("setup", Id, configHor);
|
||||
}
|
||||
else
|
||||
{
|
||||
await JSRuntime.InvokeVoidAsync("setup", Id, config);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -10,11 +10,11 @@
|
||||
|
||||
[Parameter]
|
||||
public List<chartJsData.chartJsTSerie> DataTS { get; set; } = null!;
|
||||
|
||||
|
||||
[Parameter]
|
||||
public string lineColor { get; set; } = "";
|
||||
public List<string> lineColor { get; set; } = new List<string>();
|
||||
[Parameter]
|
||||
public string backColor { get; set; } = "";
|
||||
public List<string> backColor { get; set; } = new List<string>();
|
||||
[Parameter]
|
||||
public int lTens { get; set; } = 0;
|
||||
|
||||
|
||||
@@ -12,9 +12,9 @@
|
||||
public List<double> Data { get; set; } = null!;
|
||||
|
||||
[Parameter]
|
||||
public string lineColor { get; set; } = "";
|
||||
public List<string> lineColor { get; set; } = new List<string>();
|
||||
[Parameter]
|
||||
public string backColor { get; set; } = "";
|
||||
public List<string> backColor { get; set; } = new List<string>();
|
||||
[Parameter]
|
||||
public int lTens { get; set; } = 0;
|
||||
|
||||
@@ -30,10 +30,7 @@
|
||||
/// <returns></returns>
|
||||
protected override async Task OnAfterRenderAsync(bool firstRender)
|
||||
{
|
||||
//if (!firstRender)
|
||||
//{
|
||||
await renderChart();
|
||||
//}
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
@@ -55,28 +52,34 @@
|
||||
options = new
|
||||
{
|
||||
responsive = true,
|
||||
plugins = new
|
||||
{
|
||||
legend = new
|
||||
{
|
||||
position = "top"
|
||||
},
|
||||
title = new
|
||||
{
|
||||
display = true,
|
||||
text = "Chart.js Pie Chart"
|
||||
}
|
||||
}
|
||||
// plugins = {
|
||||
// legend =
|
||||
// {
|
||||
// position = "top",
|
||||
// },
|
||||
// title = {
|
||||
// display = true,
|
||||
// text = 'Chart.js Pie Chart'
|
||||
// }
|
||||
//}
|
||||
},
|
||||
data = new
|
||||
{
|
||||
datasets = new[]
|
||||
{
|
||||
{
|
||||
new
|
||||
{
|
||||
data = Data,
|
||||
borderColor= lineColor,
|
||||
backgroundColor= backColor,
|
||||
lineTension= lTens,
|
||||
stepped= false,
|
||||
label= "Temperatura Rilevata"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -10,11 +10,11 @@
|
||||
|
||||
[Parameter]
|
||||
public List<chartJsData.chartJsTSerie> DataTS { get; set; } = null!;
|
||||
|
||||
|
||||
[Parameter]
|
||||
public string lineColor { get; set; } = "";
|
||||
public List<string> lineColor { get; set; } = new List<string>();
|
||||
[Parameter]
|
||||
public string backColor { get; set; } = "";
|
||||
public List<string> backColor { get; set; } = new List<string>();
|
||||
|
||||
/// <summary>
|
||||
/// Inizializzazione rendering componente
|
||||
@@ -28,10 +28,7 @@
|
||||
/// <returns></returns>
|
||||
protected override async Task OnAfterRenderAsync(bool firstRender)
|
||||
{
|
||||
//if (!firstRender)
|
||||
//{
|
||||
await renderChart();
|
||||
//}
|
||||
}
|
||||
|
||||
/// <summary>
|
||||
|
||||
Reference in New Issue
Block a user