Razor
@page "/Axes/Paging"
@using LiveChartsCore.SkiaSharpView.Blazor
@using LiveChartsCore;
@using LiveChartsCore.SkiaSharpView;
@using LiveChartsCore.Measure;
<div>
<button type="button" class="btn btn-primary" @onclick="() => GoToPage(0)">Page 1</button>
<button type="button" class="btn btn-primary" @onclick="() => GoToPage(1)">Page 2</button>
<button type="button" class="btn btn-primary" @onclick="() => GoToPage(2)">Page 3</button>
<button type="button" class="btn btn-primary" @onclick="SeeAll">Clear</button>
</div>
<CartesianChart
Series="@series"
XAxes="@xAxes"
ZoomMode="LiveChartsCore.Measure.ZoomAndPanMode.X">
</CartesianChart>
@code {
private int[] values;
private ISeries[] series;
private Axis xAxis;
private Axis[] xAxes;
public Paging()
{
values = Fetch();
xAxis = new Axis();
series = new ISeries[]
{
new ColumnSeries<int> { Values = values }
};
xAxes = new[] { xAxis };
}
private void GoToPage(int page)
{
if (page == 0) { xAxis.MinLimit = -0.5; xAxis.MaxLimit = 10.5; }
else if (page == 1) { xAxis.MinLimit = 9.5; xAxis.MaxLimit = 20.5; }
else if (page == 2) { xAxis.MinLimit = 19.5; xAxis.MaxLimit = 30.5; }
}
private void SeeAll()
{
xAxis.MinLimit = null;
xAxis.MaxLimit = null;
}
private static int[] Fetch()
{
var random = new Random();
var trend = 100;
var values = new System.Collections.Generic.List<int>();
for (int i = 0; i < 31; i++)
{
trend += random.Next(-10, 11);
values.Add(trend);
}
return values.ToArray();
}
}
Articles you might also find useful:
