[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>複数の円チャートを表示できるようになりました。FlexPie.bindingプロパティにコンマで区切られた複数のメンバー名を指定します。</p>
  <div id="flexPie"></div>

</div>

JavaScript

var flexPie = new wijmo.chart.FlexPie('#flexPie', {
  header: '2017年スマートフォン販売シェア',
  itemsSource: getData(),
  bindingName: 'brand',
  binding: '2017Q1,2017Q2,2017Q3,2017Q4'
});
function getData() {
  return [
    {
      "brand": "Samsung",
      "2017Q1": 23.2,
      "2017Q2": 22.9,
      "2017Q3": 22.1,
      "2017Q4": 18.9,
    },
    {
      "brand": "Huawei",
      "2017Q1": 10.0,
      "2017Q2": 11.0,
      "2017Q3": 10.4,
      "2017Q4": 10.7,
    },
    {
      "brand": "Apple",
      "2017Q1": 14.7,
      "2017Q2": 11.8,
      "2017Q3": 12.4,
      "2017Q4": 19.6,
    },
    {
      "brand": "Xiaomi",
      "2017Q1": 4.3,
      "2017Q2": 6.2,
      "2017Q3": 7.5,
      "2017Q4": 7.1,
    },
    {
      "brand": "OPPO",
      "2017Q1": 7.5,
      "2017Q2": 8.0,
      "2017Q3": 8.1,
      "2017Q4": 6.9,
    },
    {
      "brand": "その他",
      "2017Q1": 40.2,
      "2017Q2": 40.1,
      "2017Q3": 39.6,
      "2017Q4": 36.8,
    },
  ];
}