« ApexCharts » : différence entre les versions
De Banane Atomic
Aller à la navigationAller à la recherche
| Ligne 43 : | Ligne 43 : | ||
} | } | ||
}; | }; | ||
protected override async Task OnInitializedAsync() | |||
{ | |||
chartOptions.Yaxis = new List<YAxis> | |||
{ | |||
new YAxis | |||
{ | |||
Show = false, | |||
Title = new AxisTitle { Text = "Price" }, | |||
Labels = new YAxisLabels | |||
{ | |||
Formatter = @"function (value) { return Number(value).toLocaleString() + ' €';}" | |||
} | |||
} | |||
}; | |||
chartOptions.Tooltip = new Tooltip | |||
{ | |||
X = new TooltipX | |||
{ | |||
Format = "ddd d MMM yyyy" | |||
} | |||
}; | |||
// chartOptions.Xaxis = new XAxis | |||
// { | |||
// Labels = new XAxisLabels | |||
// { | |||
// Formatter = @"function (value) { | |||
// if (value === undefined) {return '';} | |||
// return value.toUpperCase();}" | |||
// } | |||
// }; | |||
// chartOptions.DataLabels = new DataLabels | |||
// { | |||
// Formatter = @"function(value, opts) { return Number(10).toLocaleString(); }" | |||
// }; | |||
} | |||
</filebox> | </filebox> | ||
Version du 15 août 2023 à 21:09
Links
Blazor-ApexCharts
Scatter chart
| Page.razor |
<ApexChart
@ref=chart
Options=chartOptions
TItem="Item"
Title="Items"
XAxisType=XAxisType.Datetime>
<ApexPointSeries
Name="Serie name"
TItem="Item"
Items="items"
SeriesType="SeriesType.Scatter"
XValue="@(x => x.Datetime.ToString("d MMM yy"))"
YValue="@(x => x.Price)"
OrderByDescending="@(x => x.X)"
Color="White"
PointColor="@(x => x.Valid ? "Green" : "Red")"
ShowDataLabels />
</ApexChart>
|
| Page.razor.cs |
private ApexChart<TransactionDataResponse> chart = default!;
private readonly ApexChartOptions<TransactionDataResponse> chartOptions = new()
{
Theme = new Theme { Mode = Mode.Dark },
NoData = new NoData { Text = "Loading ..." },
DataLabels = new DataLabels
{
OffsetY = -10,
Background = new DataLabelsBackground { Enabled = false }
}
};
protected override async Task OnInitializedAsync()
{
chartOptions.Yaxis = new List<YAxis>
{
new YAxis
{
Show = false,
Title = new AxisTitle { Text = "Price" },
Labels = new YAxisLabels
{
Formatter = @"function (value) { return Number(value).toLocaleString() + ' €';}"
}
}
};
chartOptions.Tooltip = new Tooltip
{
X = new TooltipX
{
Format = "ddd d MMM yyyy"
}
};
// chartOptions.Xaxis = new XAxis
// {
// Labels = new XAxisLabels
// {
// Formatter = @"function (value) {
// if (value === undefined) {return '';}
// return value.toUpperCase();}"
// }
// };
// chartOptions.DataLabels = new DataLabels
// {
// Formatter = @"function(value, opts) { return Number(10).toLocaleString(); }"
// };
}
|
Add the package
|
dotnet add package Blazor-ApexCharts |
| Pages/_Host.cshtml |
<!-- <script src="_framework/blazor.server.js"></script> --> <script src="_content/Blazor-ApexCharts/js/apex-charts.min.js"></script> <script src="_content/Blazor-ApexCharts/js/blazor-apex-charts.js"></script> |
