[FlexChart] エクスポート

by Wijmo5_jp

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/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/wijmo.input.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.grid.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.chart.min.js"></script>
<div class="container">

  <h1>
    エクスポート</h1>
  <p>
    チャートを他のドキュメントに含めるためのイメージとして保存することは一般的な要件です。一部のブラウザでは、これをコンテキストメニューのオプションとしてサポートしていますが、すべてではありません。</p>
  <p>
    FlexChartの<b>saveImageToFile</b>メソッドはこれを簡単にします：</p>
  
  <p id="saveButtons">
    名前を付けて保存：
    <button class="btn btn-default">PNG</button>
    <button class="btn btn-default">JPEG</button>
    <button class="btn btn-default">SVG</button>
  </p>

  <div id="theChart"></div>
  
</div>

CSS

.wj-flexchart {
  height: 300px;
  margin: 10px 0;
}
body {
  margin-bottom: 24pt;
}

JavaScript

onload = function() {

  // create the chart
  var theChart = new wijmo.chart.FlexChart('#theChart', {
  	header: 'Phase II Test Results',
    chartType: 'Scatter',
    axisY: {
      axisLine: true
    },
    series: [
    	{
      	name: 'Experiment 1', 
        itemsSource: getData(50, 0, 3),
        bindingX: 'x',
        binding: 'y' },
    	{
      	name: 'Experiment 2',
        itemsSource: getData(40, 100, 12),
        bindingX: 'x', 
        binding: 'y' },
    	{
      	name: 'Experiment 3',
        itemsSource: getData(30, -100, 24),
        bindingX: 'x', 
        binding: 'y' },
    ]
  });

	// save chart image to file
  document.getElementById('saveButtons').addEventListener('click', function(e) {
  	if (e.target instanceof HTMLButtonElement) {
    	theChart.saveImageToFile('FlexChart.' + e.target.textContent);
    }
  })
  
	// data sources
  function getData(cnt, a, b) {
  	var arr = [],
    	  x = -5 * cnt / 2;
    for (i = 0; i < cnt; i++) {
    	var rnd = Math.random() * cnt - cnt / 2;
    	arr.push({
      	x: x,
        y: a + x * (b + rnd) + rnd
      });
      x += .5 + Math.random() * 10;
    }
    return arr;
  }
}