[FlexChart] ステップチャート

by Wijmo5_jp

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://demo.grapecity.com/wijmo/sample/scripts/sample.js"></script>
<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>
<div class="container">

  <label>チャート種別
    <select onchange="flexChart.chartType = this.value">
      <option value="Step">ステップ</option>
      <option value="StepSymbols">マーカー付きステップ</option>
      <option value="StepArea">ステップ面</option>
    </select>
  </label><br>
  <div id="flexChart"></div>

</div>

CSS

body {
  margin: 50px 0;
}

JavaScript

var flexChart = new wijmo.chart.FlexChart('#flexChart', {
  itemsSource: sample.sales(),
  chartType: 'Step',
  bindingX: '年度',
  series: [
    { binding: '飲料' }
  ],
  axisY: {
    min: 0
  }
});