在.NET应用程序中引入盈亏平衡表
在ComponentOne 2020v2版本中，我们引入了盈亏平衡表。盈亏平衡分析用于计算边际成本。此技术已被生产管理人员和管理会计广泛使用。盈亏平衡表显示了总成本等于销售额的销量。总成本等于销售额的点称为收支平衡点。收支平衡点可以使用以下公式确定：损益平衡量=（总固定成本/（销售价格–变动成本）） 损益平衡值=损益事件数量*销售价格根据上述公式，损益平衡点的价格是损益为零的价格，损益平衡点的数量表示损益无效的生产单位的数量。可以使用以下三个值来计算这些值：[*]总固定成本：总固定成本是任何组织中不会根据生产数量而变化的成本。例如，机器租金或年度维护成本
[*]贡献价格：该值不是固定的，取决于产生的数量
[*]销售价格：交付的产品在市场上出售的价格。
让我们用一个例子来更全面地理解这一点：假设一个组织的固定成本为\ $ 1,000,000，每单位价格为\ $ 20，而该产品的这一单位售价为$ 120。现在，让我们计算盈亏平衡点，其中亏损为零，利润也为零。
[*]收支平衡数量= 1,000,000 /（120-20）= 10,000
[*]突发事件值= 10,000 * 120 = $ 1,200,000
根据以上所述，收支平衡数量为10,000个单位。让我们验证上面的公式。
1个单位9999伙10000伙10001伙
销售价格1 x 120 = 120120 x 9，999 = 1,199,880120 x 10,000 = 1,200,000120 x 10,001 = 1,200,120
成本价格20 x 1 = 2020 x 9,999 = 199,98020 x 10,000 = 200,00020 x 10,001 = 200,020
贡献120-20 = 1001,199,880-199,980 = 999,9001,200,000-20,000 = 1,000,0001,200,120-200,020 = 1,000,100
固定成本1,000,0001,000,0001,000,0001,000,000
利润损失$（999,900）$（100）$（0）$ 100
这是上述数据的收支平衡表：https://global-cdn.grapecity.com/blogs/componentone/20201121-introducing-break-even-charts-in-dot-net-applications/image1_edited.png如上图所示，单位在X轴上表示，价格在Y轴上表示。数量和价值与我们上面计算的相同。现在，我们了解了盈亏平衡图表的概念，让我们看一下如何将这些图表添加到MVC应用程序中。要在项目中添加收支平衡图，我们需要执行以下步骤：
[*]安装C1 Nuget软件包
[*]注册资源
[*]添加盈亏平衡图
如何安装C1 Nuget软件包：若要使用C1图表，应在项目中安装C1.AspNetCore.MVC软件包。要添加所需的程序包，请执行以下步骤：
[*]右键单击“ Asp”中的“依赖项”。Net Core MVC项目
[*]选择“管理Nuget软件包”选项，然后选择“浏览”选项卡
[*]搜索C1.AspNetCore.MVC程序包
[*]选择此软件包，然后单击“安装”
https://global-cdn.grapecity.com/blogs/componentone/20201121-introducing-break-even-charts-in-dot-net-applications/image2_edited.png此后，将安装所需的软件包。注册资源：安装软件包后，应注册资源以添加项目所需的控件。请执行以下步骤：
[*]打开〜/_ViewImports.cshtml文件，并添加以下代码行：@using C1.Web.Mvc
@using C1.Web.Mvc.Fluent
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *, C1.AspNetCore.Mvc
[*]打开“〜/Shared/_Layout.cshtml”文件，并在头部添加以下标签：<head>
...
<c1-styles />
<c1-scripts />
</head>
如何添加盈亏平衡图通过执行上述两个步骤，我们准备将盈亏平衡图添加到我们的项目中。在本节中，我们将学习如何将盈亏平衡图添加到项目中。
[*]损益区域的突发事件图表
[*]盈亏平衡点的损益图
[*]具有各种变量的盈亏平衡图
表示盈亏区域的盈亏平衡图https://global-cdn.grapecity.com/blogs/componentone/20201121-introducing-break-even-charts-in-dot-net-applications/image3_edited.png上图是一个简单的收支平衡图。它仅显示盈亏区域。将其添加到以下代码段中。<c1-flex-chart id="breakeven">
<c1-flex-chart-breakeven fixed-cost=1000000" variable-cost="20" sales-price="120">
</c1-flex-chart-breakeven>
</c1-flex-chart>
收支平衡点图表https://global-cdn.grapecity.com/blogs/componentone/20201121-introducing-break-even-charts-in-dot-net-applications/image4_edited.png上面的图表与具有损益区域的简单突破事件图表相同。此图表表示盈亏平衡图表，其中带有蓝色的附加直线，可以通过设置其他颜色进行修改。请参考以下代码片段以供参考：@{
var _styles = new BreakEvenStyles();
_styles.BreakEven = new SVGStyle() { Stroke = "blue", StrokeWidth = 3 };
}
<c1-flex-chart id="breakeven2">
<c1-flex-chart-breakeven fixed-cost="1000000" variable-cost="20" sales-price="120" styles="_styles">
</c1-flex-chart-breakeven>
</c1-flex-chart>
多变量盈亏平衡图表https://global-cdn.grapecity.com/blogs/componentone/20201121-introducing-break-even-charts-in-dot-net-applications/image5_edited.png上表显示了其他计算出的变量（安全边际，销售收入，总成本等）。可以通过使用SVGStyle为每个变量设置显示样式来完成。请使用相同的以下代码段：@{
var styles = new BreakEvenStyles()
{
BreakEven = new SVGStyle() { Stroke = "rgb(69,171,235)", StrokeWidth = 2},
FixedCost = new SVGStyle() { Stroke = "grey", StrokeWidth = 2 },
MarginalProfit = new SVGStyle() { Stroke = "green", StrokeWidth = 2 },
SafetyMargin = new SVGStyle() { Stroke = "lightgreen", StrokeWidth = 0 },
SalesRevenue = new SVGStyle() { Stroke = "rgb(127,42,250)",StrokeWidth =2 },
TotalCost = new SVGStyle() { Stroke = "red",StrokeWidth =2},
VariableCost = new SVGStyle() { Stroke = "black", StrokeWidth = 2}
};
}
<h3>BreakEven Chart with various values</h3>
<c1-flex-chart id="breakeven3">
<c1-flex-chart-breakeven fixed-cost="1000000" variable-cost="20" sales-price="120" styles="styles">
</c1-flex-chart-breakeven>
</c1-flex-chart>
按照上面的代码片段，我们可以修改样式并设置属性以显示在图表上。以上的图表，你可以在在线demo中找到
页:
[1]