FlexChart　データ選択のパフォーマンス(2020J v1)

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">
  <h4>2020J v1</h4>
  <p>任意の点をクリックして選択してください。</p>
  <div id="chart"></div>
  選択されている値: <span id="log"></span><br>
  点をクリックしてから選択されるまでにかかった時間: <span id="time">&nbsp;</span>
</div>

CSS

body {
  margin: 50px 0;
}
.wj-flexchart .wj-state-selected {
  stroke: red;
  stroke-width: 2;
}

JavaScript

document.readyState === 'complete' ? init() : window.onload = init;
function init() {
  var time = null;
  let theChart = new wijmo.chart.FlexChart('#chart', {
    chartType: 'Scatter',
    selectionMode: wijmo.chart.SelectionMode.Point,
    selectionChanged: function (s, e) {
      if (s.selection　&& time != null) {
        document.getElementById('time').innerText = wijmo.Globalize.format(Date.now() - time, 'n0') + ' ms';

        var dataObject = s.selection.collectionView.currentItem;
        document.getElementById('log').innerText = 'ID:' + wijmo.Globalize.formatNumber(dataObject.id,'n') 
          + ' X:' + wijmo.Globalize.formatNumber(dataObject.x,'n') 
          + ' Y:' + wijmo.Globalize.formatNumber(dataObject.y,'n');
        time = null;s
      }
    },
    series: [
      {
        name: 'データ',
        itemsSource: getData(5000),
        bindingX: 'x',
        binding: 'y'
      }
    ]
  });

  theChart.hostElement.addEventListener('mouseup', function(e) {
    time = Date.now();
  });
}

function getData(cnt) {
  let arr = [];
  let numArr = [-1, 1];
  for (let i = 0; i < cnt; i++) {
    arr.push({
      id: i,
      x: numArr[Math.floor(Math.random() * numArr.length)] * (Math.round(Math.random() * 1000000)),
      y: numArr[Math.floor(Math.random() * numArr.length)] * Math.round(Math.random() * 1000000)
    });
  }
  return arr;
}