Wijmo FlexChart 損益分岐点チャート

by Wijmo5_jp

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css">
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/cultures/wijmo.culture.ja.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.chart.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.chart.analytics.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.input.min.js"></script>
<div class="container-fluid">
  <label for="salesPrice">単価</label><div id="salesPrice"></div><br>
  <label for="variableCost">変動費</label><div id="variableCost"></div><br>
  <label for="fixedCost">固定費</label><div id="fixedCost"></div><br>
  <div id="flexChart"></div>
</div>

CSS

body {
  margin: 50px 0;
}
label {
  width: 100px;
}

JavaScript

document.readyState === 'complete' ? init() : window.onload = init;
function init() {
  var breakEven = new wijmo.chart.analytics.BreakEven({
    salesPrice: 200, // 単価
    variableCost: 100, // 変動費
    fixedCost: 1000000, // 固定費
    style: { fill: 'rgba(0,0,255,0.5)', strokeWidth: 0 }, // 損失
    altStyle: { fill: 'rgba(255,0,0,0.5)', strokeWidth: 0 }, // 利益
    styles: {
      safetyMargin: { fill: 'lightgreen', strokeWidth: 0 }, // 安全マージン
      salesRevenue: { stroke: 'rgba(127,42,250,1)', strokeWidth: 3 }, // 売上高
      totalCost: { stroke: 'red', strokeWidth: 3  }, // 総費用
      fixedCost: { stroke: 'grey', strokeWidth: 3  }, // 固定費
      variableCost: { stroke: 'black', strokeWidth: 3 }, // 変動費
      marginalProfit: { stroke: 'green', strokeWidth: 3 }, // 限界利益
      breakEven: { stroke: 'rgba(69,171,235)', strokeWidth: 3 } // 損益分岐点
    }
  });
  var flexChart = new wijmo.chart.FlexChart('#flexChart');
  flexChart.series.push(breakEven);
  flexChart.axisX.title = '販売量';

  var salesPrice = new wijmo.input.InputNumber('#salesPrice', {
    value: 200,
    step: 10,
    min: 110,
    format: 'c',
    showSpinner: true,
    valueChanged: function (s, e) {
      breakEven.salesPrice = s.value;
      variableCost.max = s.value - s.step;
    }
  });
  var variableCost = new wijmo.input.InputNumber('#variableCost', {
    value: 100,
    step: 10,
    max: 190,
    min: 10,
    format: 'c',
    showSpinner: true,
    valueChanged: function (s, e) {
      breakEven.variableCost = s.value;
      salesPrice.min = s.value + s.step;
    }
  });
  var fixedCost = new wijmo.input.InputNumber('#fixedCost', {
    value: 1000000,
    step: 100000,
    format: 'c',
    showSpinner: true,
    valueChanged: function (s, e) {
      breakEven.fixedCost = s.value;
    }
  });
}