diff --git a/src/components/BootstrapBlazor.Chart/BootstrapBlazor.Chart.csproj b/src/components/BootstrapBlazor.Chart/BootstrapBlazor.Chart.csproj index 123f6035..a7c02ff7 100644 --- a/src/components/BootstrapBlazor.Chart/BootstrapBlazor.Chart.csproj +++ b/src/components/BootstrapBlazor.Chart/BootstrapBlazor.Chart.csproj @@ -1,7 +1,7 @@ - 10.0.5 + 10.0.6 diff --git a/src/components/BootstrapBlazor.Chart/Components/Chart/Chart.razor.js b/src/components/BootstrapBlazor.Chart/Components/Chart/Chart.razor.js index c7581ad9..2aaa7fc2 100644 --- a/src/components/BootstrapBlazor.Chart/Components/Chart/Chart.razor.js +++ b/src/components/BootstrapBlazor.Chart/Components/Chart/Chart.razor.js @@ -392,6 +392,39 @@ const getChartOption = function (option) { showDataLabel = context => Number(context.dataset?.data[context.dataIndex]) !== 0; } + const datalabels = { + anchor: option.options.anchor, + align: option.options.align, + formatter: option.options.formatter, + display: showDataLabel, + color: option.options.chartDataLabelColor, + font: { + weight: 'bold' + } + }; + + if (option.options.showTotalDataLabel && option.options.x.stacked) { + const lastVisibleIndex = chart => { + let last = -1; + chart.data.datasets.forEach((v, index) => { + if (chart.isDatasetVisible(index)) { + last = index; + } + }); + return last; + }; + datalabels.labels = { + value: {}, + total: { + anchor: 'end', + align: 'end', + display: context => context.datasetIndex === lastVisibleIndex(context.chart), + formatter: (value, context) => context.chart.data.datasets.reduce( + (total, v, index) => context.chart.isDatasetVisible(index) ? total + (Number(v.data[context.dataIndex]) || 0) : total, 0) + } + }; + } + return { ...config, ...{ @@ -412,16 +445,7 @@ const getChartOption = function (option) { display: option.options.title != null, text: option.options.title }, - datalabels: { - anchor: option.options.anchor, - align: option.options.align, - formatter: option.options.formatter, - display: showDataLabel, - color: option.options.chartDataLabelColor, - font: { - weight: 'bold' - } - }, + datalabels: datalabels, customCanvasBackgroundColor: { color: option.options.canvasBackgroundColor, } diff --git a/src/components/BootstrapBlazor.Chart/Components/Chart/ChartOptions.cs b/src/components/BootstrapBlazor.Chart/Components/Chart/ChartOptions.cs index 9057a367..c493d9cc 100644 --- a/src/components/BootstrapBlazor.Chart/Components/Chart/ChartOptions.cs +++ b/src/components/BootstrapBlazor.Chart/Components/Chart/ChartOptions.cs @@ -218,6 +218,11 @@ public class ChartOptions /// public bool ShowDataLabel { get; set; } + /// + /// 获得/设置 堆叠模式下是否在每个柱条顶部显示总计数据标签 默认 false + /// + public bool ShowTotalDataLabel { get; set; } + /// /// 获得/设置 是否单独设置柱状图颜色 ///