« ApexCharts » : différence entre les versions
De Banane Atomic
Aller à la navigationAller à la recherche
(Page créée avec « Category:Javascript Category:Web = Links = * [https://apexcharts.com ApexCharts] ») |
(→Links) |
||
| (8 versions intermédiaires par le même utilisateur non affichées) | |||
| Ligne 1 : | Ligne 1 : | ||
[[Category:Javascript]] | [[Category:Javascript]] | ||
[[Category:Blazor]] | |||
[[Category:Web]] | [[Category:Web]] | ||
= Links = | = Links = | ||
* [https://apexcharts.com ApexCharts] | * [https://apexcharts.com ApexCharts] | ||
* [https://apexcharts.com/docs Documentation] | |||
= [https://github.com/apexcharts/Blazor-ApexCharts Blazor-ApexCharts] = | |||
== Scatter chart == | |||
<filebox fn='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> | |||
</filebox> | |||
<filebox fn='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 } | |||
}, | |||
Yaxis = new List<YAxis> { | |||
Show = false, // do not display the Y axis | |||
Title = new AxisTitle { Text = "Price" }, | |||
Labels = new YAxisLabels | |||
{ | |||
Formatter = @"function (value) { return Number(value).toLocaleString() + ' €';}" | |||
} | |||
}, | |||
Tooltip = new Tooltip | |||
{ | |||
X = new TooltipX { Format = "ddd d MMMM yyyy" }, | |||
Y = new TooltipY { Formatter = @"function(value, { series, seriesIndex, dataPointIndex, w }) { return value + ' €'; }" } | |||
} | |||
}; | |||
</filebox> | |||
== Add the package == | |||
<kode lang='bash'> | |||
dotnet add package Blazor-ApexCharts | |||
</kode> | |||
<filebox fn='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> | |||
</filebox> | |||
Dernière version du 15 août 2023 à 21:34
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 }
},
Yaxis = new List<YAxis> {
Show = false, // do not display the Y axis
Title = new AxisTitle { Text = "Price" },
Labels = new YAxisLabels
{
Formatter = @"function (value) { return Number(value).toLocaleString() + ' €';}"
}
},
Tooltip = new Tooltip
{
X = new TooltipX { Format = "ddd d MMMM yyyy" },
Y = new TooltipY { Formatter = @"function(value, { series, seriesIndex, dataPointIndex, w }) { return value + ' €'; }" }
}
};
|
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> |
