[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/wijmo.chart.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/cultures/wijmo.culture.ja.min.js"></script>
<div class="container">

  凡例の方向:
  <label><input type="radio" name="orientation" checked onchange="update()">自動（水平方向）</label>
  <label><input type="radio" id="vertical" name="orientation" onchange="update()">垂直方向</label><br>
  <div id="flexChart"></div>

</div>

CSS

body {
  margin: 50px 0;
}
#flexChart {
  width: 600px;
  height: 300px;
}

JavaScript

var flexChart = new wijmo.chart.FlexChart('#flexChart', {
  itemsSource: sample.sales(),
  bindingX: '年度',
  series: [
    { binding: '飲料', name: '飲料' },
    { binding: '調味料', name: '調味料' },
    { binding: '菓子類', name: '菓子類' }
  ],
  legend: {
    position: wijmo.chart.Position.Bottom
  }
});

function update() {
  flexChart.legend.orientation = document.getElementById('vertical').checked ? wijmo.chart.Orientation.Vertical : wijmo.chart.Orientation.Auto;
}