
Line 图
使用 OnInit
回调委托方法,对初始化数据进行赋值后,即可进行绘图操作
Demo
Loading ...
Line 图
使用设置 ChartDataset
实例的 Tension
参数,调整折线的曲率,默认位 0.4f
Demo
Loading ...
Line 图
使用设置 ChartDataset
实例的 Data
参数中含 null
,折线图使用虚线连接
Demo
Loading ...
@page "/charts/line"
<DemoBlock Title="Line 图" Introduction="使用 <code>OnInit</code> 回调委托方法,对初始化数据进行赋值后,即可进行绘图操作" Name="LineOnInit">
<Chart @ref="LineChart" OnInitAsync="() => OnInit(0.4f, false)" OnAfterInitAsync="@OnAfterInit" OnAfterUpdateAsync="@OnAfterUpdate" />
<div class="text-center mt-2 chart">
<div class="btn-group">
<button class="btn btn-primary" @onclick="e => Utility.RandomData(LineChart)"><i class="fa fa-line-chart"></i><span>随机数据</span></button>
<button class="btn btn-primary" @onclick="e => Utility.AddDataSet(LineChart, ref LineDatasetCount)"><i class="fa fa-plus-circle"></i><span>添加数据集</span></button>
<button class="btn btn-primary" @onclick="e => Utility.RemoveDataSet(LineChart, ref LineDatasetCount)"><i class="fa fa-minus-circle"></i><span>移除数据集</span></button>
<button class="btn btn-primary" @onclick="e => Utility.AddData(LineChart, ref LineDataCount)"><i class="fa fa-plus"></i><span>添加数据</span></button>
<button class="btn btn-primary" @onclick="e => Utility.RemoveData(LineChart, ref LineDataCount)"><i class="fa fa-minus"></i><span>移除数据</span></button>
</div>
</div>
<BlockLogger @ref="Logger" class="mt-3" />
</DemoBlock>
<DemoBlock Title="Line 图" Introduction="使用设置 <code>ChartDataset</code> 实例的 <code>Tension</code> 参数,调整折线的曲率,默认位 <b>0.4f</b>" Name="LineTension">
<Chart OnInitAsync="() => OnInit(0f, false)" />
</DemoBlock>
<DemoBlock Title="Line 图" Introduction="使用设置 <code>ChartDataset</code> 实例的 <code>Data</code> 参数中含 <code>null</code>,折线图使用虚线连接" Name="LineNullable">
<Chart OnInitAsync="() => OnInit(0f, true)" />
</DemoBlock>
<ChartToast />
// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
// Website: https://www.blazor.zone or https://argozhang.github.io/
using BootstrapBlazor.Components;
using BootstrapBlazor.Shared.Components;
namespace BootstrapBlazor.Shared.Samples.Charts;
/// <summary>
///
/// </summary>
public partial class Line
{
private Random Randomer { get; } = new Random();
private int LineDatasetCount = 2;
private int LineDataCount = 7;
[NotNull]
private Chart? LineChart { get; set; }
[NotNull]
private BlockLogger? Logger { get; set; }
/// <summary>
///
/// </summary>
/// <param name="firstRender"></param>
protected override void OnAfterRender(bool firstRender)
{
base.OnAfterRender(firstRender);
if (firstRender)
{
Logger.Log("Line 正在加载数据 ...");
}
}
private Task OnAfterInit()
{
Logger.Log("Line 初始化完毕");
return Task.CompletedTask;
}
private Task OnAfterUpdate(ChartAction action)
{
Logger.Log($"Line 图更新数据操作完毕 -- {action}");
return Task.CompletedTask;
}
private Task<ChartDataSource> OnInit(float tension, bool hasNull)
{
var ds = new ChartDataSource();
ds.Options.Title = "Line 折线图";
ds.Options.X.Title = "天数";
ds.Options.Y.Title = "数值";
ds.Labels = Enumerable.Range(1, LineDataCount).Select(i => i.ToString());
for (var index = 0; index < LineDatasetCount; index++)
{
ds.Data.Add(new ChartDataset()
{
Tension = tension,
Label = $"数据集 {index}",
Data = Enumerable.Range(1, LineDataCount).Select((i, index) => (index == 2 && hasNull) ? null! : (object)Randomer.Next(20, 37))
});
}
return Task.FromResult(ds);
}
}