Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(Chart): Add a CanvasBackgroundColor parameter #3458

Merged
merged 3 commits into from
May 9, 2024
Merged

feat(Chart): Add a CanvasBackgroundColor parameter #3458

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ea7dfcf
Add `customCanvasBackgroundColor` plugin to `Chart.razor.js`
h2ls May 9, 2024
80ed2ae
chore: bump version 8.1.3
ArgoZhang May 9, 2024
94bc57b
chore: 更新依赖包
ArgoZhang May 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
Expand Down
2 changes: 1 addition & 1 deletion src/Extensions/Components/BootstrapBlazor.Chart/BootstrapBlazor.Chart.csproj
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
20 changes: 19 additions & 1 deletion src/Extensions/Components/BootstrapBlazor.Chart/Components/Chart/Chart.razor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -41,7 +55,8 @@ const chartOption = {
}
}
}
}
},
plugins: [plugin]
}

const skipped = (ctx, value) => ctx.p0.skip || ctx.p1.skip ? value : undefined
Expand Down Expand Up @@ -315,6 +330,9 @@ const getChartOption = function (option) {
font: {
weight: 'bold'
}
},
customCanvasBackgroundColor: {
color: option.options.canvasBackgroundColor,
}
},
scales: scale
Expand Down
5 changes: 5 additions & 0 deletions src/Extensions/Components/BootstrapBlazor.Chart/Components/Chart/ChartOptions.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -159,6 +159,11 @@ public class ChartOptions
/// </summary>
public string? YScalesGridTickColor { get; set; }

/// <summary>
/// 获得/设置 图表背景颜色
/// </summary>
public string? CanvasBackgroundColor { get; set; }

/// <summary>
/// 获得/设置 是否显示柱状图数据值
/// </summary>
Expand Down