!3646 doc(#I679TR): update Charts demo

* Package 使用方法搬迁到组件<PackageTips>
* Merge branch 'main' into doc_I679TR
* 更新 Charts 文档

src/BootstrapBlazor.Shared/Locales/en.json

@@ -459,18 +459,13 @@
     "P9": "I am prompt text message"
   },
   "BootstrapBlazor.Shared.Samples.Charts.Index": {
-    "H1": "Chart",
-    "H2": "Drawing components of various charts with given data",
-    "P1": "This component depends on",
-    "P2": "When using this component, you need to reference its component package",
-    "P3": "After version 5.0.19 of this set of components, the <code>chart.js</code> script is upgraded to <code>3.3.0</code> In order to adapt to the new version of the script, some functions are updated or removed",
-    "P4": "Nuget Install",
-    "P5": "use",
-    "P5A": "conduct",
-    "P6": "installation of components",
-    "P7": "CSS file",
-    "P8": "JS file",
-    "P9": "Component data can be set in the <code>OnInit</code> callback delegate"
+    "Chart": "Chart",
+    "ChartIntro": "Drawing components of various charts with given data",
+    "AddBelowThisLine": "Add below this line",
+    "CSSfile": "CSS file",
+    "JSfile": "JS file",
+    "ChartIntro2": "Component data can be set in the <code>OnInit</code> callback delegate",
+    "Tips": "Pay attention to the order of adding reference JS files, otherwise the chart component will always be stuck in the 'loading' interface"
   },
   "BootstrapBlazor.Shared.Samples.Charts.Bubble": {
     "P1": "Bubble diagram",
@@ -479,7 +474,10 @@
     "P4": "Add dataset",
     "P5": "Remove dataset",
     "P6": "Adding data",
-    "P7": "Remove data"
+    "P7": "Remove data",
+    "Reload": "Reload",
+    "AspectRatio": "Chart ratio",
+    "AspectRatioIntro": "Setting the height and width will automatically disable the constraint chart ratio, and the chart will fill the container"
   },
   "BootstrapBlazor.Shared.Samples.Charts.Doughnut": {
     "P1": "Doughnut diagram",
@@ -489,7 +487,10 @@
     "P5": "Remove dataset",
     "P6": "Adding data",
     "P7": "Remove data",
-    "P8": "Half circle/Full circle"
+    "P8": "Half circle/Full circle",
+    "Reload": "Reload",
+    "AspectRatio": "Chart ratio",
+    "AspectRatioIntro": "Setting the height and width will automatically disable the constraint chart ratio, and the chart will fill the container"
   },
   "BootstrapBlazor.Shared.Samples.Charts.Pie": {
     "P1": "Pie diagram",
@@ -498,7 +499,10 @@
     "P4": "Add dataset",
     "P5": "Remove dataset",
     "P6": "Adding data",
-    "P7": "Remove data"
+    "P7": "Remove data",
+    "Reload": "Reload",
+    "AspectRatio": "Chart ratio",
+    "AspectRatioIntro": "Setting the height and width will automatically disable the constraint chart ratio, and the chart will fill the container"
   },
   "BootstrapBlazor.Shared.Samples.Charts.Line": {
     "P1": "Line graph",
@@ -511,7 +515,10 @@
     "P8": "Line graph",
     "P9": "Use the <code>Tension</code> parameter of the <code>ChartDataset</code> instance to adjust the curvature of the polyline, the default is <b>0.4f</b>",
     "P10": "Line graph",
-    "P11": "Use to set the <code>Data</code> parameter of the <code>ChartDataset</code> instance with <code>null</code>, and the line chart is connected with a dotted line"
+    "P11": "Use to set the <code>Data</code> parameter of the <code>ChartDataset</code> instance with <code>null</code>, and the line chart is connected with a dotted line",
+    "Reload": "Reload",
+    "AspectRatio": "Chart ratio",
+    "AspectRatioIntro": "Setting the height and width will automatically disable the constraint chart ratio, and the chart will fill the container"
   },
   "BootstrapBlazor.Shared.Samples.Charts.Bar": {
     "P1": "Bar graph",
@@ -523,8 +530,11 @@
     "P7": "Remove dataset",
     "P8": "Adding data",
     "P9": "Remove data",
-    "P10": "Bar graph",
-    "P11": "By setting the X/Y axis <code>Stacked</code> property, control whether to stack the arrangement"
+    "BarStacked": "Stacked",
+    "BarStackedIntro": "By setting the X/Y axis <code>Stacked</code> property, control whether to stack the arrangement",
+    "Reload": "Reload",
+    "AspectRatio": "Chart ratio",
+    "AspectRatioIntro": "Setting the height and width will automatically disable the constraint chart ratio, and the chart will fill the container"
   },
   "BootstrapBlazor.Shared.Samples.Transitions": {
     "H1": "Transition effect",

src/BootstrapBlazor.Shared/Locales/zh.json

@@ -460,18 +460,13 @@
     "P9": "我是提示文字信息"
   },
   "BootstrapBlazor.Shared.Samples.Charts.Index": {
-    "H1": "Chart 图表",
-    "H2": "通过给定数据，绘画各种图表的组件",
-    "P1": "本组件依赖于",
-    "P2": "使用本组件时需要引用其组件包",
-    "P3": "本套组件 5.0.19 版本后 <code>chart.js</code> 脚本升级到 <code>3.3.0</code> 为了适配新版本脚本，有部分功能更新或者移除",
-    "P4": "Nuget 包安装",
-    "P5": "使用",
-    "P5A": "进行",
-    "P6": "组件的安装",
-    "P7": "CSS 文件",
-    "P8": "JS 文件",
-    "P9": "组件数据在 <code>OnInit</code> 回调委托中进行设置即可"
+    "Chart": "Chart 图表",
+    "ChartIntro": "通过给定数据，绘画各种图表的组件",
+    "AddBelowThisLine": "添加到这行下面",
+    "CSSfile": "CSS 文件",
+    "JSfile": "JS 文件",
+    "ChartIntro2": "组件数据在 <code>OnInit</code> 回调委托中进行设置即可",
+    "Tips": "注意添加引用 JS 文件顺序,否则会导致图表组件一直卡在 '载入中' 界面"
   },
   "BootstrapBlazor.Shared.Samples.Charts.Bubble": {
     "P1": "Bubble 图",
@@ -480,7 +475,10 @@
     "P4": "添加数据集",
     "P5": "移除数据集",
     "P6": "添加数据",
-    "P7": "移除数据"
+    "P7": "移除数据",
+    "Reload": "重载",
+    "AspectRatio": "图表比例",
+    "AspectRatioIntro": "设置了高度和宽度,会自动禁用约束图表比例, 图表充满容器"
   },
   "BootstrapBlazor.Shared.Samples.Charts.Doughnut": {
     "P1": "Doughnut 图",
@@ -490,7 +488,10 @@
     "P5": "移除数据集",
     "P6": "添加数据",
     "P7": "移除数据",
-    "P8": "半圆/全圆"
+    "P8": "半圆/全圆",
+    "Reload": "重载",
+    "AspectRatio": "图表比例",
+    "AspectRatioIntro": "设置了高度和宽度,会自动禁用约束图表比例, 图表充满容器"
   },
   "BootstrapBlazor.Shared.Samples.Charts.Pie": {
     "P1": "Pie 图",
@@ -499,7 +500,10 @@
     "P4": "添加数据集",
     "P5": "移除数据集",
     "P6": "添加数据",
-    "P7": "移除数据"
+    "P7": "移除数据",
+    "Reload": "重载",
+    "AspectRatio": "图表比例",
+    "AspectRatioIntro": "设置了高度和宽度,会自动禁用约束图表比例, 图表充满容器"
   },
   "BootstrapBlazor.Shared.Samples.Charts.Line": {
     "P1": "Line 图",
@@ -512,7 +516,10 @@
     "P8": "Line 图",
     "P9": "使用设置 <code>ChartDataset</code> 实例的 <code>Tension</code> 参数，调整折线的曲率，默认位 <b>0.4f</b>",
     "P10": "Line 图",
-    "P11": "使用设置 <code>ChartDataset</code> 实例的 <code>Data</code> 参数中含 <code>null</code>，折线图使用虚线连接"
+    "P11": "使用设置 <code>ChartDataset</code> 实例的 <code>Data</code> 参数中含 <code>null</code>，折线图使用虚线连接",
+    "Reload": "重载",
+    "AspectRatio": "图表比例",
+    "AspectRatioIntro": "设置了高度和宽度,会自动禁用约束图表比例, 图表充满容器"
   },
   "BootstrapBlazor.Shared.Samples.Charts.Bar": {
     "P1": "Bar 图",
@@ -524,8 +531,11 @@
     "P7": "移除数据集",
     "P8": "添加数据",
     "P9": "移除数据",
-    "P10": "Bar 图",
-    "P11": "通过设置 X/Y 轴 <code>Stacked</code> 属性，控制是否堆砌排列"
+    "BarStacked": "堆砌排列",
+    "BarStackedIntro": "通过设置 X/Y 轴 <code>Stacked</code> 属性，控制是否堆砌排列",
+    "Reload": "重载",
+    "AspectRatio": "图表比例",
+    "AspectRatioIntro": "设置了高度和宽度,会自动禁用约束图表比例, 图表充满容器"
   },
   "BootstrapBlazor.Shared.Samples.Transitions": {
     "H1": "Transition 过渡效果",

src/BootstrapBlazor.Shared/Samples/Charts/Bar.razor

@@ -18,6 +18,7 @@
     <div class="text-center mt-2 chart">
         <div class="btn-group">
             <button class="btn btn-primary" @onclick="e => Utility.RandomData(BarChart)"><i class="fa-solid fa-chart-column"></i><span>@Localizer["P5"]</span></button>
+            <button class="btn btn-primary" @onclick="OnReloadChart"><i class="fa-solid fa-chart-column"></i><span>@Localizer["Reload"]</span></button>
             <button class="btn btn-primary" @onclick="e => Utility.AddDataSet(BarChart, ref BarDatasetCount)"><i class="fa-solid fa-circle-plus"></i><span>@Localizer["P6"]</span></button>
             <button class="btn btn-primary" @onclick="e => Utility.RemoveDataSet(BarChart, ref BarDatasetCount)"><i class="fa-solid fa-circle-minus"></i><span>@Localizer["P7"]</span></button>
             <button class="btn btn-primary" @onclick="e => Utility.AddData(BarChart, ref BarDataCount)"><i class="fa-solid fa-plus"></i><span>@Localizer["P8"]</span></button>
@@ -27,6 +28,10 @@
     <BlockLogger @ref="Logger" class="mt-3" />
 </DemoBlock>
 
-<DemoBlock Title="@Localizer["P10"]" Introduction="@Localizer["P11"]" Name="BarStacked">
+<DemoBlock Title="@Localizer["BarStacked"]" Introduction="@Localizer["BarStackedIntro"]" Name="BarStacked">
     <Chart ChartType="ChartType.Bar" OnInitAsync="() => OnInit(true)" />
 </DemoBlock>
+
+<DemoBlock Title="@Localizer["AspectRatio"]" Introduction="@Localizer["AspectRatioIntro"]" Name="BarAspectRatio">
+    <Chart ChartType="ChartType.Bar" OnInitAsync="() => OnInit(true,false)" Title="Aspect Ratio Demo" Height="500px" Width="300px" />
+</DemoBlock>

src/BootstrapBlazor.Shared/Samples/Charts/Bar.razor.cs

@@ -40,10 +40,13 @@ public partial class Bar
 
     private Task OnAfterUpdate(ChartAction action) => InvokeAsync(() => Logger.Log($"Bar Figure update data operation completed -- {action}"));
 
-    private Task<ChartDataSource> OnInit(bool stacked)
+    private Task<ChartDataSource> OnInit(bool stacked,bool setTitle=true)
     {
         var ds = new ChartDataSource();
-        ds.Options.Title = "Bar Histogram";
+        if (setTitle)
+        {
+            ds.Options.Title = "Bar Histogram";
+        }
         ds.Options.X.Title = "days";
         ds.Options.Y.Title = "Numerical value";
         ds.Options.X.Stacked = stacked;
@@ -76,4 +79,14 @@ public partial class Bar
     }
 
     private void OnStopChart() => _chartCancellationTokenSource.Cancel();
+
+    /// <summary>
+    /// 强刷控件,重新初始化控件外观
+    /// </summary>
+    private Task OnReloadChart()
+    {
+        BarDataCount=Randomer.Next(1, 15);
+        BarChart?.Reload();
+        return Task.CompletedTask;
+    }
 }

src/BootstrapBlazor.Shared/Samples/Charts/Bubble.razor

@@ -6,6 +6,7 @@
     <div class="text-center mt-2 chart">
         <div class="btn-group">
             <button class="btn btn-primary" @onclick="e => Utility.RandomData(BubbleChart)"><i class="fa-regular fa-snowflake"></i><span>@Localizer["P3"]</span></button>
+            <button class="btn btn-primary" @onclick="OnReloadChart"><i class="fa-solid fa-chart-column"></i><span>@Localizer["Reload"]</span></button>
             <button class="btn btn-primary" @onclick="e => Utility.AddDataSet(BubbleChart, ref BubbleDatasetCount)"><i class="fa-solid fa-circle-plus"></i><span>@Localizer["P4"]</span></button>
             <button class="btn btn-primary" @onclick="e => Utility.RemoveDataSet(BubbleChart, ref BubbleDatasetCount)"><i class="fa-solid fa-circle-minus"></i><span>@Localizer["P5"]</span></button>
             <button class="btn btn-primary" @onclick="e => Utility.AddData(BubbleChart, ref BubbleDataCount)"><i class="fa-solid fa-plus"></i><span>@Localizer["P6"]</span></button>
@@ -14,3 +15,7 @@
     </div>
     <BlockLogger @ref="Logger" class="mt-3" />
 </DemoBlock>
+
+<DemoBlock Title="@Localizer["AspectRatio"]" Introduction="@Localizer["AspectRatioIntro"]" Name="BarAspectRatio">
+    <Chart ChartType="ChartType.Bar" OnInitAsync="@OnInit" Height="500px" Width="300px" />
+</DemoBlock>

src/BootstrapBlazor.Shared/Samples/Charts/Bubble.razor.cs

@@ -68,4 +68,14 @@ public partial class Bubble
         }
         return Task.FromResult(ds);
     }
+
+    /// <summary>
+    /// 强刷控件,重新初始化控件外观
+    /// </summary>
+    private Task OnReloadChart()
+    {
+        BubbleDataCount = Randomer.Next(1, 15);
+        BubbleChart?.Reload();
+        return Task.CompletedTask;
+    }
 }

src/BootstrapBlazor.Shared/Samples/Charts/Doughnut.razor

@@ -6,6 +6,7 @@
     <div class="text-center mt-2 chart">
         <div class="btn-group">
             <button class="btn btn-primary" @onclick="e => Utility.RandomData(DoughnutChart)"><i class="fa-brands fa-slack"></i><span>@Localizer["P3"]</span></button>
+            <button class="btn btn-primary" @onclick="OnReloadChart"><i class="fa-solid fa-chart-column"></i><span>@Localizer["Reload"]</span></button>
             <button class="btn btn-primary" @onclick="e => Utility.AddDataSet(DoughnutChart, ref DoughnutDatasetCount)"><i class="fa-solid fa-circle-plus"></i><span>@Localizer["P4"]</span></button>
             <button class="btn btn-primary" @onclick="e => Utility.RemoveDataSet(DoughnutChart, ref DoughnutDatasetCount)"><i class="fa-solid fa-circle-minus"></i><span>@Localizer["P5"]</span></button>
             <button class="btn btn-primary" @onclick="e => Utility.AddData(DoughnutChart, ref DoughnutDataCount)"><i class="fa-solid fa-plus"></i><span>@Localizer["P6"]</span></button>
@@ -14,4 +15,8 @@
         </div>
     </div>
     <BlockLogger @ref="Logger" class="mt-3" />
+</DemoBlock> 
+
+<DemoBlock Title="@Localizer["AspectRatio"]" Introduction="@Localizer["AspectRatioIntro"]" Name="BarAspectRatio">
+    <Chart ChartType="ChartType.Bar" OnInitAsync="@OnInit" Height="500px" Width="300px" />
 </DemoBlock>

src/BootstrapBlazor.Shared/Samples/Charts/Doughnut.razor.cs

@@ -69,4 +69,14 @@ public partial class Doughnut
         Angle = IsCircle ? 360 : 0;
         await DoughnutChart.Update(ChartAction.SetAngle);
     }
+
+    /// <summary>
+    /// 强刷控件,重新初始化控件外观
+    /// </summary>
+    private Task OnReloadChart()
+    {
+        DoughnutDataCount = Randomer.Next(1, 15);
+        DoughnutChart?.Reload();
+        return Task.CompletedTask;
+    }
 }

src/BootstrapBlazor.Shared/Samples/Charts/Index.razor

@@ -2,38 +2,37 @@
 @layout MainLayout
 @inject IStringLocalizer<Index> Localizer
 
-<h3>@Localizer["H1"]</h3>
-<h4>@Localizer["H2"]</h4>
+<h3>@Localizer["Chart"]</h3>
+<h4>@Localizer["ChartIntro"]</h4>
 
-<p>@Localizer["P1"] <a href="https://www.nuget.org/packages?q=BootstrapBlazor.Chart" target="_blank"><code>BootstrapBlazor.Chart</code></a>，@Localizer["P2"]</p>
+<PackageTips Name="BootstrapBlazor.Chart" />
 
 <Tips>
-    <div>@((MarkupString)Localizer["P3"].Value)</div>
+    <div>@((MarkupString)Localizer["Tips"].Value)</div>
 </Tips>
 
-<p><b>@Localizer["P4"]</b></p>
+<h4>@Localizer["CSSfile"]</h4>
 
-<p>@Localizer["P5"] <a href="https://www.nuget.org/packages?q=BootstrapBlazor.Chart" target="_blank">nuget.org</a> @Localizer["P5A"] <code>BootstrapBlazor.Chart</code> @Localizer["P6"]</p>
-
-<div class="code-label">.NET CLI</div>
-<Pre class="no-highlight">dotnet add package BootstrapBlazor.Chart --version @Version</Pre>
-
-<div class="code-label">PackageReference</div>
-<Pre class="no-highlight">&lt;PackageReference Include="BootstrapBlazor.Chart" Version="@Version" /&gt;</Pre>
-
-<div class="code-label">Package Manager</div>
-<Pre class="no-highlight">Install-Package BootstrapBlazor.Chart -Version @Version</Pre>
-
-<h4>@Localizer["P7"]</h4>
+<p>
+    @Localizer["AddBelowThisLine"] : 
+    <code>
+        &lt;link href="_content/BootstrapBlazor/css/bootstrap.blazor.bundle.min.css" rel="stylesheet"  /&gt;
+    </code>
+</p>
 
 <Pre>&lt;link rel="stylesheet" href="_content/BootstrapBlazor.Chart/css/bootstrap.blazor.chart.bundle.min.css" /&gt;</Pre>
 
-<h4>@Localizer["P8"]</h4>
+<h4>@Localizer["JSfile"]</h4>
+
+<p>
+    @Localizer["AddBelowThisLine"] : 
+    <code>
+        &lt;script src="_content/BootstrapBlazor/js/bootstrap.blazor.bundle.min.js"&gt;&lt;/script&gt;
+    </code>
+</p>
 
 <Pre>&lt;script src="_content/BootstrapBlazor.Chart/js/bootstrap.blazor.chart.bundle.min.js"&gt;&lt;/script&gt;</Pre>
 
-<p>@Localizer["P9"]</p>
+<p>@((MarkupString)Localizer["ChartIntro2"].Value)</p>
 
 <AttributeTable Items="@GetAttributes()" />
-
-<EventTable Items="@GetEvents()" />

src/BootstrapBlazor.Shared/Samples/Charts/Index.razor.cs

@@ -11,46 +11,6 @@ namespace BootstrapBlazor.Shared.Samples.Charts;
 /// </summary>
 public sealed partial class Index
 {
-    [Inject]
-    [NotNull]
-    private VersionService? VersionManager { get; set; }
-
-    private string Version { get; set; } = "fetching";
-
-    /// <summary>
-    /// OnInitializedAsync 方法
-    /// </summary>
-    /// <returns></returns>
-    protected override async Task OnInitializedAsync()
-    {
-        Version = await VersionManager.GetVersionAsync("bootstrapblazor.chart");
-    }
-
-    /// <summary>
-    /// 获得事件方法
-    /// </summary>
-    /// <returns></returns>
-    private static IEnumerable<EventItem> GetEvents() => new EventItem[]
-    {
-        new EventItem()
-        {
-            Name = "OnInitAsync",
-            Description="Component data initialization delegate method",
-            Type ="Func<Task<ChartDataSource>>"
-        },
-        new EventItem()
-        {
-            Name = "OnAfterInitAsync",
-            Description="This delegate method is called back after the client draws the chart",
-            Type ="Func<Task>"
-        },
-        new EventItem()
-        {
-            Name = "OnAfterUpdateAsync",
-            Description="This delegate method is called back after the client has finished updating the chart",
-            Type ="Func<ChartAction, Task>"
-        }
-    };
 
     /// <summary>
     /// 获得属性方法
@@ -59,18 +19,129 @@ public sealed partial class Index
     private static IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
     {
         new AttributeItem() {
-            Name = "Width",
-            Description = "Component width supports units such as: 100px 75%",
+            Name = "Title",
+            Description = "图表标题",
             Type = "string",
             ValueList = " — ",
             DefaultValue = " — "
         },
+        new AttributeItem() {
+            Name = "Height",
+            Description = "组件高度支持单位, 如: 30% , 30px , 30em , calc(30%)",
+            Type = "string",
+            ValueList = " — ",
+            DefaultValue = " — "
+        },
+        new AttributeItem() {
+            Name = "Width",
+            Description = "组件宽度支持单位, 如: 30% , 30px , 30em , calc(30%)",
+            Type = "string",
+            ValueList = " — ",
+            DefaultValue = " — "
+        },
+        new AttributeItem() {
+            Name = "Responsive",
+            Description = "设置图表所在canvas是否随其容器大小变化而变化",
+            Type = "bool",
+            ValueList = "true|false",
+            DefaultValue = "true"
+        },
+        new AttributeItem() {
+            Name = "MaintainAspectRatio",
+            Description = "设置是否约束图表比例",
+            Type = "bool",
+            ValueList = "true|false",
+            DefaultValue = "true"
+        },
+        new AttributeItem() {
+            Name = "AspectRatio",
+            Description = "设置canvas的宽高比（值为1表示canvas是正方形），如果显示定义了canvas的高度，则此属性无效",
+            Type = "int",
+            ValueList = " - ",
+            DefaultValue = "2"
+        },
+        new AttributeItem() {
+            Name = "设置 图表尺寸延迟变化时间",
+            Description = "",
+            Type = "int",
+            ValueList = " - ",
+            DefaultValue = "0"
+        },
+        new AttributeItem() {
+            Name = "Angle",
+            Description = "设置 Bubble 模式下显示角度 180 为 半圆 360 为正圆",
+            Type = "int",
+            ValueList = " - ",
+            DefaultValue = " - "
+        },
+        new AttributeItem() {
+            Name = "LoadingText",
+            Description = "设置正在加载文本",
+            Type = "string",
+            ValueList = " - ",
+            DefaultValue = " - "
+        },
         new AttributeItem() {
             Name = "ChartType",
-            Description = "Set chart type",
+            Description = "图表组件渲染类型",
             Type = "ChartType",
             ValueList = "Line|Bar|Pie|Doughnut|Bubble",
             DefaultValue = "Line"
+        },
+        new AttributeItem() {
+            Name = "ChartAction",
+            Description = "图表组件组件方法",
+            Type = "ChartAction",
+            ValueList = "Update|AddDataset|RemoveDataset|AddData|RemoveData|SetAngle|Reload",
+            DefaultValue = "Update"
+        },
+        new AttributeItem() {
+            Name = "",
+            Description = "",
+            Type = "bool",
+            ValueList = "true|false",
+            DefaultValue = "true"
+        },
+        new AttributeItem()
+        {
+            Name = "OnInitAsync",
+            Description="组件数据初始化委托方法",
+            Type ="Func<Task<ChartDataSource>>",
+            ValueList = " - ",
+            DefaultValue = " - "
+        },
+        new AttributeItem()
+        {
+            Name = "OnAfterInitAsync",
+            Description="客户端绘制图表完毕后回调此委托方法",
+            Type ="Func<Task>",
+            ValueList = " - ",
+            DefaultValue = " - "
+        },
+        new AttributeItem()
+        {
+            Name = "OnAfterUpdateAsync",
+            Description="客户端更新图表完毕后回调此委托方法",
+            Type ="Func<ChartAction, Task>",
+            ValueList = " - ",
+            DefaultValue = " - "
+        },
+        new AttributeItem()
+        {
+            Name = "Update",
+            Description="更新图表方法",
+            Type ="Task",
+            ValueList = " - ",
+            DefaultValue = " - "
+        },
+        new AttributeItem()
+        {
+            Name = "Reload",
+            Description="重新加载,强制重新渲染图表",
+            Type ="Task",
+            ValueList = " - ",
+            DefaultValue = " - "
         }
+
     };
 }

src/BootstrapBlazor.Shared/Samples/Charts/Line.razor

@@ -6,6 +6,7 @@
     <div class="text-center mt-2 chart">
         <div class="btn-group">
             <button class="btn btn-primary" @onclick="e => Utility.RandomData(LineChart)"><i class="fa-solid fa-chart-line"></i><span>@Localizer["P3"]</span></button>
+            <button class="btn btn-primary" @onclick="OnReloadChart"><i class="fa-solid fa-chart-column"></i><span>@Localizer["Reload"]</span></button>
             <button class="btn btn-primary" @onclick="e => Utility.AddDataSet(LineChart, ref LineDatasetCount)"><i class="fa-solid fa-circle-plus"></i><span>@Localizer["P4"]</span></button>
             <button class="btn btn-primary" @onclick="e => Utility.RemoveDataSet(LineChart, ref LineDatasetCount)"><i class="fa-solid fa-circle-minus"></i><span>@Localizer["P5"]</span></button>
             <button class="btn btn-primary" @onclick="e => Utility.AddData(LineChart, ref LineDataCount)"><i class="fa-solid fa-plus"></i><span>@Localizer["P6"]</span></button>
@@ -22,3 +23,7 @@
 <DemoBlock Title="@Localizer["P10"]" Introduction="@Localizer["P11"]" Name="LineNullable">
     <Chart OnInitAsync="() => OnInit(0f, true)" />
 </DemoBlock>
+
+<DemoBlock Title="@Localizer["AspectRatio"]" Introduction="@Localizer["AspectRatioIntro"]" Name="BarAspectRatio">
+    <Chart ChartType="ChartType.Bar" OnInitAsync="() => OnInit(0f,true)" Height="500px" Width="300px" />
+</DemoBlock>

src/BootstrapBlazor.Shared/Samples/Charts/Line.razor.cs

@@ -63,4 +63,15 @@ public partial class Line
         }
         return Task.FromResult(ds);
     }
+
+    /// <summary>
+    /// 强刷控件,重新初始化控件外观
+    /// </summary>
+    private Task OnReloadChart()
+    {
+        LineDataCount = Randomer.Next(1, 15);
+        LineChart?.Reload();
+        return Task.CompletedTask;
+    }
+
 }

src/BootstrapBlazor.Shared/Samples/Charts/Pie.razor

@@ -6,6 +6,7 @@
     <div class="text-center mt-2 chart">
         <div class="btn-group">
             <button class="btn btn-primary" @onclick="e => Utility.RandomData(PieChart)"><i class="fa-solid fa-chart-pie"></i><span>@Localizer["P3"]</span></button>
+            <button class="btn btn-primary" @onclick="OnReloadChart"><i class="fa-solid fa-chart-column"></i><span>@Localizer["Reload"]</span></button>
             <button class="btn btn-primary" @onclick="e => Utility.AddDataSet(PieChart, ref PieDatasetCount)"><i class="fa-solid fa-circle-plus"></i><span>@Localizer["P4"]</span></button>
             <button class="btn btn-primary" @onclick="e => Utility.RemoveDataSet(PieChart, ref PieDatasetCount)"><i class="fa-solid fa-circle-minus"></i><span>@Localizer["P5"]</span></button>
             <button class="btn btn-primary" @onclick="e => Utility.AddData(PieChart, ref PieDataCount)"><i class="fa-solid fa-plus"></i><span>@Localizer["P6"]</span></button>
@@ -14,3 +15,7 @@
     </div>
     <BlockLogger @ref="Logger" class="mt-3" />
 </DemoBlock>
+
+<DemoBlock Title="@Localizer["AspectRatio"]" Introduction="@Localizer["AspectRatioIntro"]" Name="BarAspectRatio">
+    <Chart ChartType="ChartType.Bar" OnInitAsync="@OnInit" Height="500px" Width="300px" />
+</DemoBlock>

src/BootstrapBlazor.Shared/Samples/Charts/Pie.razor.cs

@@ -60,4 +60,14 @@ public partial class Pie
         }
         return Task.FromResult(ds);
     }
+
+    /// <summary>
+    /// 强刷控件,重新初始化控件外观
+    /// </summary>
+    private Task OnReloadChart()
+    {
+        PieDataCount = Randomer.Next(1, 15);
+        PieChart?.Reload();
+        return Task.CompletedTask;
+    }
 }