« ApexCharts » : différence entre les versions
De Banane Atomic
Aller à la navigationAller à la recherche
Aucun résumé des modifications |
|||
| Ligne 7 : | Ligne 7 : | ||
= [https://github.com/apexcharts/Blazor-ApexCharts Blazor-ApexCharts] = | = [https://github.com/apexcharts/Blazor-ApexCharts Blazor-ApexCharts] = | ||
== Scatter chart == | |||
<filebox fn='Page.razor'> | <filebox fn='Page.razor'> | ||
<ApexChart | <ApexChart | ||
| Ligne 40 : | Ligne 41 : | ||
} | } | ||
}; | }; | ||
</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> | </filebox> | ||
Version du 15 août 2023 à 19:38
Links
Blazor-ApexCharts
Scatter chart
| Page.razor |
<ApexChart
@ref=chart
Options=chartOptions
TItem="Item"
Title="Items">
<ApexPointSeries
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 }
}
};
|
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> |
