feat(Chart): Add a CanvasBackgroundColor parameter (#3458)

* Add `customCanvasBackgroundColor` plugin to `Chart.razor.js` * chore: bump version 8.1.3 * chore: 更新依赖包 --------- Co-authored-by: Argo-AscioTech <argo@live.ca>
dotnetcore · May 9, 2024 · 4e2f472 · 4e2f472
1 parent b64f2a4
commit 4e2f472
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 3 deletions.
diff --git a/src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj b/src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj
@@ -34,7 +34,7 @@
     <PackageReference Include="BootstrapBlazor.Bluetooth" Version="8.0.2" />
     <PackageReference Include="BootstrapBlazor.BootstrapIcon" Version="8.0.2" />
     <PackageReference Include="BootstrapBlazor.BootstrapIcon.Extensions" Version="8.0.3" />
-    <PackageReference Include="BootstrapBlazor.Chart" Version="8.1.2" />
+    <PackageReference Include="BootstrapBlazor.Chart" Version="8.1.3" />
     <PackageReference Include="BootstrapBlazor.CherryMarkdown" Version="8.0.0" />
     <PackageReference Include="BootstrapBlazor.CodeEditor" Version="8.0.2" />
     <PackageReference Include="BootstrapBlazor.Dock" Version="8.1.3" />

diff --git a/src/Extensions/Components/BootstrapBlazor.Chart/BootstrapBlazor.Chart.csproj b/src/Extensions/Components/BootstrapBlazor.Chart/BootstrapBlazor.Chart.csproj
@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>8.1.2</Version>
+    <Version>8.1.3</Version>
     <PackageTags>Bootstrap Blazor WebAssembly wasm UI Components Chart</PackageTags>
     <Description>Bootstrap UI components extensions of Chart.js</Description>
   </PropertyGroup>

diff --git a/src/Extensions/Components/BootstrapBlazor.Chart/Components/Chart/Chart.razor.js b/src/Extensions/Components/BootstrapBlazor.Chart/Components/Chart/Chart.razor.js
@@ -5,6 +5,20 @@ import EventHandler from "../../../BootstrapBlazor/modules/event-handler.js"
 
 Chart.register(ChartDataLabels);
 
+const plugin = {
+    id: 'customCanvasBackgroundColor',
+    beforeDraw: (chart, args, options) => {
+        if (options.color) {
+            const { ctx } = chart;
+            ctx.save();
+            ctx.globalCompositeOperation = 'destination-over';
+            ctx.fillStyle = options.color;
+            ctx.fillRect(0, 0, chart.width, chart.height);
+            ctx.restore();
+        }
+    }
+};
+
 const chartOption = {
     options: {
         responsive: true,
@@ -41,7 +55,8 @@ const chartOption = {
                 }
             }
         }
-    }
+    },
+    plugins: [plugin]
 }
 
 const skipped = (ctx, value) => ctx.p0.skip || ctx.p1.skip ? value : undefined
@@ -315,6 +330,9 @@ const getChartOption = function (option) {
                         font: {
                             weight: 'bold'
                         }
+                    },
+                    customCanvasBackgroundColor: {
+                        color: option.options.canvasBackgroundColor,
                     }
                 },
                 scales: scale

diff --git a/src/Extensions/Components/BootstrapBlazor.Chart/Components/Chart/ChartOptions.cs b/src/Extensions/Components/BootstrapBlazor.Chart/Components/Chart/ChartOptions.cs
@@ -159,6 +159,11 @@ public class ChartOptions
     /// </summary>
     public string? YScalesGridTickColor { get; set; }
 
+    /// <summary>
+    /// 获得/设置 图表背景颜色
+    /// </summary>
+    public string? CanvasBackgroundColor { get; set; }
+
     /// <summary>
     /// 获得/设置 是否显示柱状图数据值
     /// </summary>