! 제품 버전을 정확하게 입력해 주세요.
제품 버전이 정확하게 기재되어 있지 않은 경우,
최신 버전을 기준으로 안내 드리므로
더욱 빠르고 명확한 안내를 위해
제품 버전을 정확하게 입력해 주세요!

.NET 응용 프로그램에 손익 분기 차트 도입 > 블로그 & Tips

본문 바로가기

ComponentOne

블로그 & Tips

.NET 응용 프로그램에 손익 분기 차트 도입

페이지 정보

작성자 GrapeCity 작성일 2021-01-05 17:29 조회 5,573회 댓글 0건

본문

ComponentOne 2020 v2 릴리스에 손익 분기 차트를 도입했습니다. 손익분기점 분석은 한계 비용을 계산하는 데 사용됩니다.

이 기법은 프로덕션 관리 및 관리 회계사가 많이 사용합니다.

손익분기점 분석 차트에서는 총 비용이 매출액과 같아지는 판매량을 표시합니다.

총비용이 매출액과 같아지는 지점을 손익분기점이라고 합니다.

손익분기점은 다음 공식을 사용해 파악할 수 있습니다.


손익 분기 수량 = (총 고정 비용 / (판매 가격 – 가변 비용)) 손익 분기 값 = 손익 분기 수량 * 판매 가격


위 공식에 따르면 손익 분기 값은 이익과 손실이 없는 가격이며, 손익 분기 수량은 이익과 손실이 무효가 되는 생산 단위 수량을 의미합니다.


이 값은 다음 세 가지 값을 사용해 계산할 수 있습니다.


  1. 총 고정 비용: 총 고정 비용은 생산 수량에 따라 변하지 않는 모든 조직의 비용입니다. 예: 기계 대여 또는 연간 유지 관리 비용

  2. 공헌 가격: 이 값은 고정되어 있지 않으며 생산되는 양에 따라 달라집니다.

  3. 판매 가격: 제공되는 제품이 시장에서 판매되는 가격입니다.


이 내용을 더 잘 이해하기 위해 한 가지 예를 들어 보겠습니다.


어떤 조직의 고정 비용이 100만 달러이고, 단위당 가격은 20달러, 이 제품 한 단위는 120달러에 판매된다고 가정해 봅시다.


그러면 이제 손실이 없고 수익 역시 없는 손익분기점을 계산해 보겠습니다.


  • 손익 분기 수량 = 1,000,000/ (120-20) = 10,000

  • 손익 분기 값 = 10,000*120 = 1,200,000달러


위 계산에 따르면 손익 분기 수량은 10,000 단위입니다. 위 공식을 확인해 보겠습니다.

 

1 단위 

9999 단위 

10000 단위 

10001 단위 

 판매가격

 1 x 120 = 120

 120 x 9, 999 = 1,199,880

 120 x 10,000 = 1,200,000

 120 x 10,001 = 1,200,120

 비용

 20 x 1 = 20

 20 x 9,999 = 199,980

 20 x 10,000 = 200,000

 20 x 10,001 = 200,020

 공헌

120 - 20 = 100

 1,199,880 - 199,980 = 999,900

 1,200,000 - 20,000 = 1,000,000

 1,200,120 - 200,020 = 1,000,100

 고정 비용

 1,000,000

 1,000,000

 1,000,000

 1,000,000

 이익/손실

 (999,900)달러

 (100)달러

 $(0)

 100달러

 

위 데이터를 손익 분기 차트로 나타내면 다음과 같습니다.


.NET 손익 분기 차트 이익 및 손실 영역


위 차트에서 보시는 바와 같이 단위는 X축에, 가격은 Y축에 표시되어 있습니다. 수량과 가격은 위에서 계산한 것과 동일합니다.


손익 분기 차트의 개념을 이해했으므로 이 차트를 MVC 응용 프로그램에 추가하는 방법을 알아보겠습니다.


프로젝트에서 손익 분기 차트를 추가하려면 아래와 같은 단계를 따라야 합니다.

  1. C1 Nuget 패키지 설치

  2. 리소스 등록

  3. 손익 분기 차트 추가


C1 Nuget 패키지 설치 방법:

C1 차트를 사용하려면 C1.AspNetCore.MVC 패키지를 프로젝트에 설치해야 합니다. 필요한 패키지를 추가하려면 다음 단계를 따르십시오.


  1. Asp. Net Core MVC 프로젝트에서 의존성을 마우스 오른쪽 버튼으로 클릭

  2. Nuget 패키지 관리 옵션을 선택하고 찾아보기 탭을 선택

  3. C1.AspNetCore.MVC 패키지 검색

  4. 이 패키지를 선택하고 설치를 클릭

ASP.NET Core.MVC Edition


이렇게 하면 필요한 패키지가 설치됩니다.


리소스 등록:

패키지가 설치되었으면 리소스를 등록하여 프로젝트의 필수 컨트롤을 추가해야 합니다.

다음과 같은 단계를 거치시기 바랍니다.


  1. ~/_ViewImports.cshtml 파일을 열고 다음 코드를 추가합니다.

    @using C1.Web.Mvc
    @using C1.Web.Mvc.Fluent
    @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
    @addTagHelper *, C1.AspNetCore.Mvc

  1. ‘~/Shared/_Layout.cshtml’ 파일을 열고 헤드 섹션에서 다음 태그를 추가합니다.

    <head>
    ...
      <c1-styles />
      <c1-scripts />
    </head>

손익 분기 차트를 추가하는 방법

위 두 단계를 마쳤으면 손익 분기 차트를 프로젝트에 추가할 준비가 된 것입니다. 이 섹션에서는 프로젝트에 손익 분기 차트를 추가하는 방법을 배웁니다.

  1. 이익 및 손실 영역이 표시된 손익 분기 차트

  2. 손익분기점이 표시된 손익 분기 차트

  3. 다양한 변수가 표시된 손익 분기 차트


이익 및 손실 영역이 표시된 손익 분기 차트

.NET 응용 프로그램에 손익 분기 차트 도입


위 차트는 단순한 손익 분기 차트로, 이익 및 손실 영역만 표시되어 있습니다.


다음 코드 조각에 이 차트를 추가하십시오.

<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>


손익분기점이 표시된 손익 분기 차트

.NET 응용 프로그램에 손익 분기 차트 도입


위 차트는 이익 및 손실 영역이 표시된 단순한 손익 분기 차트와 동일합니다.


이 차트는 파란색 직선이 추가된 손익 분기 차트이며, 파란색 선은 다른 색을 설정하여 수정할 수 있습니다.


다음 코드 조각을 참조하시기 바랍니다.

@{
    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>


여러 변수가 표시된 손익 분기 차트

.NET 손익 분기 차트 및 계산된 변수


위 차트에는 기타 계산된 변수(안전 마진, 영업 매출, 총 비용 등)가 표시되어 있습니다.

이렇게 하려면 각 변수에 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>


위 코드 조각에 따라 스타일을 수정하고 차트에 속성이 표시되도록 설정할 수 있습니다.

자세히 알아보려면 데모 샘플을 확인하십시오.

  • 페이스북으로 공유
  • 트위터로  공유
  • 링크 복사
  • 카카오톡으로 보내기

댓글목록

등록된 댓글이 없습니다.

메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기

태그1

인기글

더보기
  • 인기 게시물이 없습니다.
메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
이메일 : sales-kor@mescius.com | 전화 : 1670-0583 | 경기도 과천시 과천대로 7길 33, 디테크타워 B동 1107호 메시어스(주) 대표자 : 허경명 | 사업자등록번호 : 123-84-00981 | 통신판매업신고번호 : 2013-경기안양-00331 ⓒ 2024 MESCIUS inc. All rights reserved.