[FlexChart] 範囲棒グラフ

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/samples/wijmo/jp/scripts/sample.js"></script>
<div id="flexChart"></div>

JavaScript

var flexChart = new wijmo.chart.FlexChart('#flexChart', {
  itemsSource: [
    {task: 'タスク1', start: new Date('2018/2/1'), end: new Date('2018/2/3')},
    {task: 'タスク2', start: new Date('2018/2/3'), end: new Date('2018/2/8')},
    {task: 'タスク3', start: new Date('2018/2/8'), end: new Date('2018/2/10')},
    {task: 'タスク4', start: new Date('2018/2/10'), end: new Date('2018/2/12')},
  ],
  chartType: 'Bar',
  bindingX: 'task',
  series: [
    { binding: 'start,end' }
  ],
  axisX: {
    format: 'M/d'
  },
});