Wijmo FlexPie チャート内部のにテキスト表示

by Wijmo5_jp

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/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>
<div class="container-fluid">
  <div id="flexPie"></div>
</div>

CSS

body {
  margin: 50px 0;
}

JavaScript

document.readyState === 'complete' ? init() : window.onload = init;
function init() {
  var flexPie = new wijmo.chart.FlexPie('#flexPie', {
    itemsSource: data,
    innerRadius: 0.5,
    bindingName: '分類名',
    binding: '売上',
    dataLabel: {
      content: '{name}'
    },
    innerText: '総売上:' + wijmo.Globalize.format(sum,'C'),
    innerTextStyle: {
     fontWeight: 'bold',
     fontSize: '15px'
    }
  });
}

var categoryNames = ['飲料', '調味料', '菓子類', '乳製品', '穀類、シリアル', '肉類', '加工食品', '魚介類'];
function random(max, min) {
  if (!min) min = 0;
  return Math.floor(Math.random() * (max - min)) + min;
}
function getData() {
  var sales = [];
  for (var i = 0; i < 5; i++) {
    sales.push({
      分類名: categoryNames[i],
      売上: random(150000, 50000) * 100
    });
  }
  return sales;
}
var data = getData();

var sum = data.map(function (data) {
  return data.売上;
  }).reduce(function (sum, cur) {
    return sum + cur;
});