Skip to content

Commit d661903

Browse files
ArgoZhangArgoZhang
authored
feat(Chart): add ShowTotalDataLabel parameter (#8216)
* chore: bump version 10.0.6 * feat(Chart): add ShowTotalDataLabel parameter * doc: 增加合计自定义样式 * feat(Utility): 函数不参与合并 * doc: 更新示例
1 parent 1557d5d commit d661903

6 files changed

Lines changed: 118 additions & 1 deletion

File tree

‎src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929
<PackageReference Include="BootstrapBlazor.BarCode" Version="10.0.0" />
3030
<PackageReference Include="BootstrapBlazor.BarcodeGenerator" Version="10.0.0" />
3131
<PackageReference Include="BootstrapBlazor.BootstrapIcon" Version="10.0.0" />
32-
<PackageReference Include="BootstrapBlazor.Chart" Version="10.0.5" />
32+
<PackageReference Include="BootstrapBlazor.Chart" Version="10.0.6" />
3333
<PackageReference Include="BootstrapBlazor.ChatBot" Version="10.0.0" />
3434
<PackageReference Include="BootstrapBlazor.CherryMarkdown" Version="10.0.1" />
3535
<PackageReference Include="BootstrapBlazor.CodeEditor" Version="10.0.0" />

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

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,58 @@
6363
<Chart ChartType="ChartType.Bar" OnInitAsync="OnInitStackedShowDataLabel" Height="500px" Width="500px" />
6464
</DemoBlock>
6565

66+
<DemoBlock Title="@Localizer["BarTotalDataLabelTitle"]"
67+
Introduction="@Localizer["BarTotalDataLabelIntro"]"
68+
Name="BarTotalDataLabel">
69+
<section ignore>
70+
<ul class="ul-demo">
71+
<li>
72+
<p>@((MarkupString)Localizer["BarTotalDataLabelLi1"].Value)</p>
73+
<Pre class="mb-3">&lt;Chart ChartType="ChartType.Bar" OnInitAsync="OnInitTotalDataLabel" Id="@@TotalDataLabelId" /&gt;</Pre>
74+
</li>
75+
<li>
76+
<p>@((MarkupString)Localizer["BarTotalDataLabelLi2"].Value)</p>
77+
<Pre class="mb-3">import '../../../_content/BootstrapBlazor.Chart/Components/Chart/Chart.razor.js'
78+
79+
export function customTotalDataLabel(id) {
80+
// chartjs-plugin-datalabels documentation: https://chartjs-plugin-datalabels.netlify.app/guide/options.html
81+
const chart = BootstrapBlazor.Chart;
82+
chart.setOptionsById(id, {
83+
options: {
84+
plugins: {
85+
datalabels: {
86+
labels: {
87+
total: {
88+
color: '#fff',
89+
backgroundColor: 'rgb(75, 192, 192)',
90+
borderRadius: 4,
91+
padding: { top: 2, bottom: 2, left: 6, right: 6 },
92+
font: { weight: 'bold' },
93+
formatter: (value, context) => {
94+
const total = context.chart.data.datasets.reduce(
95+
(sum, v, index) => context.chart.isDatasetVisible(index) ? sum + (Number(v.data[context.dataIndex]) || 0) : sum, 0);
96+
return `Total: ${total}`;
97+
}
98+
}
99+
}
100+
}
101+
}
102+
}
103+
});
104+
}</Pre>
105+
</li>
106+
<li>
107+
<p>@((MarkupString)Localizer["BarTotalDataLabelLi3"].Value)</p>
108+
<Pre>protected override async Task InvokeInitAsync()
109+
{
110+
await InvokeVoidAsync("customTotalDataLabel", TotalDataLabelId);
111+
}</Pre>
112+
</li>
113+
</ul>
114+
</section>
115+
<Chart ChartType="ChartType.Bar" OnInitAsync="OnInitTotalDataLabel" Id="@TotalDataLabelId" Height="500px" Width="500px" />
116+
</DemoBlock>
117+
66118
<DemoBlock Title="@Localizer["BarColorSeparatelyTitle"]"
67119
Introduction="@Localizer["BarColorSeparatelyIntro"]"
68120
Name="BarColorSeparately">

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

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,8 @@ public partial class Bar
1818

1919
private string CustomCategoryLabelId => $"custom_category_label_{Id}";
2020

21+
private string TotalDataLabelId => $"total_data_label_{Id}";
22+
2123
private int BarDatasetCount { get; set; } = 2;
2224

2325
private int BarDataCount { get; set; } = 7;
@@ -49,6 +51,7 @@ protected override async Task InvokeInitAsync()
4951
{
5052
await InvokeVoidAsync("customTooltip", CustomTooltipId);
5153
await InvokeVoidAsync("customCategoryLabel", CustomCategoryLabelId);
54+
await InvokeVoidAsync("customTotalDataLabel", TotalDataLabelId);
5255
}
5356

5457
private Task OnAfterInit()
@@ -243,6 +246,31 @@ private Task<ChartDataSource> OnInitStackedShowDataLabel()
243246
return Task.FromResult(ds);
244247
}
245248

249+
private Task<ChartDataSource> OnInitTotalDataLabel()
250+
{
251+
var ds = new ChartDataSource();
252+
ds.Options.Title = "Stacked total";
253+
ds.Options.ShowDataLabel = true;
254+
ds.Options.ShowTotalDataLabel = true;
255+
ds.Options.Anchor = ChartDataLabelPosition.Center;
256+
ds.Options.X.Title = "name";
257+
ds.Options.Y.Title = "Numerical value";
258+
ds.Options.X.Stacked = true;
259+
ds.Options.Y.Stacked = true;
260+
ds.Labels = ["Alice", "Bob", "Carol"];
261+
ds.Data.Add(new ChartDataset()
262+
{
263+
Label = "Set 0",
264+
Data = new object[] { 3, 5, 2 }
265+
});
266+
ds.Data.Add(new ChartDataset()
267+
{
268+
Label = "Set 1",
269+
Data = new object[] { 2, 0, 4 }
270+
});
271+
return Task.FromResult(ds);
272+
}
273+
246274
private Task<ChartDataSource> OnInitAutoSkip(bool autoSkip)
247275
{
248276
var ds = new ChartDataSource();

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

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,33 @@ export function customCategoryLabel(id) {
1818
});
1919
}
2020

21+
export function customTotalDataLabel(id) {
22+
// chartjs-plugin-datalabels documentation: https://chartjs-plugin-datalabels.netlify.app/guide/options.html
23+
const chart = BootstrapBlazor.Chart;
24+
chart.setOptionsById(id, {
25+
options: {
26+
plugins: {
27+
datalabels: {
28+
labels: {
29+
total: {
30+
color: '#fff',
31+
backgroundColor: 'rgb(75, 192, 192)',
32+
borderRadius: 4,
33+
padding: { top: 2, bottom: 2, left: 6, right: 6 },
34+
font: { weight: 'bold' },
35+
formatter: (value, context) => {
36+
const total = context.chart.data.datasets.reduce(
37+
(sum, v, index) => context.chart.isDatasetVisible(index) ? sum + (Number(v.data[context.dataIndex]) || 0) : sum, 0);
38+
return `Total: ${total}`;
39+
}
40+
}
41+
}
42+
}
43+
}
44+
}
45+
});
46+
}
47+
2148
export function customTooltip(id) {
2249
// chart.js documentation: https://www.chartjs.org/docs/latest/configuration/tooltip.html
2350
const chart = BootstrapBlazor.Chart;

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1265,6 +1265,11 @@
12651265
"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",
12661266
"BarStackedShowDataLabelTitle": "Stacked Data Label",
12671267
"BarStackedTitle": "Stacked",
1268+
"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",
1269+
"BarTotalDataLabelLi1": "Set the <b>Id</b> parameter of the <code>Chart</code> component",
1270+
"BarTotalDataLabelLi2": "Create a client <code>JavaScript</code> script, override the <code>formatter</code> callback of the <code>total</code> label by the <code>setOptionsById</code> method to customize the total text, and customize the label style by the <code>color</code> <code>backgroundColor</code> <code>borderRadius</code> <code>padding</code> <code>font</code> properties",
1271+
"BarTotalDataLabelLi3": "Override the base class method <code>InvokeInitAsync</code> and call the client script by <code>await InvokeVoidAsync(\"customTotalDataLabel\", TotalDataLabelId)</code>",
1272+
"BarTotalDataLabelTitle": "Stacked Total Label",
12681273
"BarTwoYAxesIntro": "Show secondary Y axis: alignment, title and data group",
12691274
"BarTwoYAxesTitle": "Double Y axis",
12701275
"BarTypeAddData": "Adding data",

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1265,6 +1265,11 @@
12651265
"BarStackedShowDataLabelIntro": "堆叠模式开启 <code>ShowDataLabel</code> 时，值为 <code>0</code> 的分段不绘制数据标签，避免与相邻分段标签重叠。本例中 <b>Bob</b> 顶部分段值为 <code>0</code>，仅显示下方分段的数据标签",
12661266
"BarStackedShowDataLabelTitle": "堆叠图数据标签",
12671267
"BarStackedTitle": "堆砌排列",
1268+
"BarTotalDataLabelIntro": "堆叠模式通过设置 <code>ShowTotalDataLabel</code> 属性，在每个柱条顶部显示总计数据标签，点击图例隐藏数据集时总计值自动重新计算。本例中通过客户端脚本 <code>setOptionsById</code> 自定义 <code>total</code> 标签，将总计文本自定义为 <code>Total: {X}</code> 格式，并自定义了文字颜色、背景色、圆角、内边距与字体样式",
1269+
"BarTotalDataLabelLi1": "<code>Chart</code> 组件设置 <b>Id</b> 参数",
1270+
"BarTotalDataLabelLi2": "创建客户端 <code>JavaScript</code> 脚本，通过 <code>setOptionsById</code> 方法覆盖 <code>total</code> 标签的 <code>formatter</code> 回调自定义总计文本，并通过 <code>color</code> <code>backgroundColor</code> <code>borderRadius</code> <code>padding</code> <code>font</code> 等属性自定义标签样式",
1271+
"BarTotalDataLabelLi3": "本例中重载基类方法 <code>InvokeInitAsync</code> 通过 <code>await InvokeVoidAsync(\"customTotalDataLabel\", TotalDataLabelId)</code> 语句调用客户端脚本",
1272+
"BarTotalDataLabelTitle": "堆叠总计标签",
12681273
"BarTwoYAxesIntro": "显示第二Y轴:对齐方式,标题和对应数据组",
12691274
"BarTwoYAxesTitle": "双Y轴",
12701275
"BarTypeAddData": "添加数据",

0 commit comments

Comments
 (0)