[FinancialChart] ポイント＆フィギュアチャート

by Wijmo5_jp

HTML

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

  <div id="financialChart"></div>

</div>

CSS

#financialChart {
  height: 250px;
}

JavaScript

var financialChart = new wijmo.chart.finance.FinancialChart('#financialChart', {
  itemsSource: sample.stocks(),
  bindingX: 'date',
  series: [
    {
      binding: 'high,low,open,close',
      style: {
        stroke: 'red'
      },
      altStyle: {
        stroke: 'blue'
      }
    }
  ],
  chartType: 'PointAndFigure',
  options: {
    pointAndFigure: {
      scaling: 'Fixed',
      boxSize: 10
    }
  }
});