doc(Bar): add center sample code (#8219)

Author: ArgoZhang

src/BootstrapBlazor.Server/Components/Samples/Charts/Bar.razor

@@ -60,7 +60,14 @@
 <DemoBlock Title="@Localizer["BarStackedShowDataLabelTitle"]"
            Introduction="@Localizer["BarStackedShowDataLabelIntro"]"
            Name="BarStackedShowDataLabel">
-    <Chart ChartType="ChartType.Bar" OnInitAsync="OnInitStackedShowDataLabel" Height="500px" Width="500px" />
+    <div class="row">
+        <div class="col-12 col-sm-6">
+            <Chart ChartType="ChartType.Bar" OnInitAsync="() => OnInitStackedShowDataLabel(false)" Height="400px" Width="360px" />
+        </div>
+        <div class="col-12 col-sm-6">
+            <Chart ChartType="ChartType.Bar" OnInitAsync="() => OnInitStackedShowDataLabel(true)" Height="400px" Width="360px" />
+        </div>
+    </div>
 </DemoBlock>
 
 <DemoBlock Title="@Localizer["BarTotalDataLabelTitle"]"

src/BootstrapBlazor.Server/Components/Samples/Charts/Bar.razor.cs

@@ -223,11 +223,15 @@ private Task<ChartDataSource> OnInitShowDataLabel(bool showDataLabel)
         return Task.FromResult(ds);
     }
 
-    private Task<ChartDataSource> OnInitStackedShowDataLabel()
+    private Task<ChartDataSource> OnInitStackedShowDataLabel(bool center)
     {
         var ds = new ChartDataSource();
-        ds.Options.Title = "Stacked with zero value segment";
+        ds.Options.Title = center ? "Anchor: Center" : "Anchor: End";
         ds.Options.ShowDataLabel = true;
+        if (center)
+        {
+            ds.Options.Anchor = ChartDataLabelPosition.Center;
+        }
         ds.Options.X.Title = "name";
         ds.Options.Y.Title = "Numerical value";
         ds.Options.X.Stacked = true;

src/BootstrapBlazor.Server/Locales/en-US.json

@@ -1262,7 +1262,7 @@
     "BarShowDataLabelIntro": "By setting <code>ShowDataLabel</code> property，control whether to display chart data values",
     "BarShowDataLabelTitle": "Display chart data values",
     "BarStackedIntro": "By setting the X/Y axis <code>Stacked</code> property, control whether to stack the arrangement",
-    "BarStackedShowDataLabelIntro": "When <code>ShowDataLabel</code> is enabled in stacked mode, segments with a value of <code>0</code> do not draw data labels to avoid overlapping with adjacent segment labels. In this example, the top segment of <b>Bob</b> has a value of <code>0</code>, so only the lower segment's data label is displayed",
+    "BarStackedShowDataLabelIntro": "When <code>ShowDataLabel</code> is enabled in stacked mode, the position of the data label is controlled by the <code>Anchor</code> property. The default <code>End</code> displays it at the top of the segment, and <code>Center</code> displays it in the center of the segment. Segments with a value of <code>0</code> do not draw data labels to avoid overlapping with adjacent segment labels. In this example, the top segment of <b>Bob</b> has a value of <code>0</code>, so only the lower segment's data label is displayed",
     "BarStackedShowDataLabelTitle": "Stacked Data Label",
     "BarStackedTitle": "Stacked",
     "BarTotalDataLabelIntro": "In stacked mode, set the <code>ShowTotalDataLabel</code> property to display the total data label above each bar. The total value is automatically recalculated when a dataset is hidden by clicking the legend. In this example, the <code>total</code> label is customized by the client script <code>setOptionsById</code>: the total text is formatted as <code>Total: {X}</code>, and the text color, background color, border radius, padding and font style are customized",

src/BootstrapBlazor.Server/Locales/zh-CN.json

@@ -1262,7 +1262,7 @@
     "BarShowDataLabelIntro": "通过设置<code>ShowDataLabel</code> 属性，控制是否显示数据值",
     "BarShowDataLabelTitle": "显示图表数据值",
     "BarStackedIntro": "通过设置 X/Y 轴 <code>Stacked</code> 属性，控制是否堆砌排列",
-    "BarStackedShowDataLabelIntro": "堆叠模式开启 <code>ShowDataLabel</code> 时，值为 <code>0</code> 的分段不绘制数据标签，避免与相邻分段标签重叠。本例中 <b>Bob</b> 顶部分段值为 <code>0</code>，仅显示下方分段的数据标签",
+    "BarStackedShowDataLabelIntro": "堆叠模式开启 <code>ShowDataLabel</code> 时，通过 <code>Anchor</code> 属性控制数据标签位置，默认 <code>End</code> 显示在分段顶部，设置为 <code>Center</code> 时显示在分段中间；值为 <code>0</code> 的分段不绘制数据标签，避免与相邻分段标签重叠。本例中 <b>Bob</b> 顶部分段值为 <code>0</code>，仅显示下方分段的数据标签",
     "BarStackedShowDataLabelTitle": "堆叠图数据标签",
     "BarStackedTitle": "堆砌排列",
     "BarTotalDataLabelIntro": "堆叠模式通过设置 <code>ShowTotalDataLabel</code> 属性，在每个柱条顶部显示总计数据标签，点击图例隐藏数据集时总计值自动重新计算。本例中通过客户端脚本 <code>setOptionsById</code> 自定义 <code>total</code> 标签，将总计文本自定义为 <code>Total: {X}</code> 格式，并自定义了文字颜色、背景色、圆角、内边距与字体样式",