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

  <h1>範囲面チャート</h1>
  <p>範囲面チャートを表示できるようになりました。面チャートでbindingプロパティに'ymin,ymax'のように最小値と最大値を示すメンバー名を指定すると、最小値と最大値で囲まれた領域を塗りつぶして表示します。</p>
  <div id="flexChart"></div>

</div>

JavaScript

var flexChart = new wijmo.chart.FlexChart('#flexChart', {
  itemsSource: getData(),
  bindingX: 'month',
  series: [
    { chartType: 'Area', binding: 'low,high', name: '気温範囲' },
    { chartType: 'Line', binding: 'mean', name: '平均気温' }
  ],
  axisY: {
    title: '気温 (°C)',
    max: 30
  },
  legend: {
    position: 'Bottom'
  },
});
function getData() {
  return [
    { month: '1月', mean: -5.2, high: -0.8, low: -9.7 },
    { month: '2月', mean: -3.4, high: 1.4, low: -8.2 },
    { month: '3月', mean: 1.7, high: 6.9, low: -3.5 },
    { month: '4月', mean: 8.8, high: 14.6, low: 2.9 },
    { month: '5月', mean: 14.6, high: 20.8, low: 8.4 },
    { month: '6月', mean: 19.6, high: 25.5, low: 13.6 },
    { month: '7月', mean: 22.1, high: 27.9, low: 16.3 },
    { month: '8月', mean: 21.2, high: 26.9, low: 15.5 },
    { month: '9月', mean: 16.6, high: 22.3, low: 10.9 },
    { month: '10月', mean: 9.8, high: 15.4, low: 4.2 },
    { month: '11月', mean: 4.3, high: 8.8, low: -0.3 },
    { month: '12月', mean: -1.9, high: 2.1, low: -6 },
  ];
}