JavaScriptでCanvasにグラフを描くHightCharts を使って、スライダーで見る角度を変えてリアルタイムに動かす

JavaScript

HightCharts http://www.highcharts.com/demo/3d-column-interactive
ライブラリーを書いた人が凄すぎる。


でもね、３次元でソートして奥から描いてくれたら最高！
border と 透明度を設定できたら更に最高！


次は、Ajaxを使ってPHPを呼び出し、そこからMySQLの値を返して、グラフに反映させようっと！

<!DOCTYPE HTML>
<html>
<meta charset="utf-8">
<title>あいうえお</title>

<style>
h1 {
  display : none;
}
#container, #chart_env {
  min-width: 310px; 
  max-width: 800px;
  margin: 20px auto;
}

#container {
  height: 500px; 
}

fieldset {
  border-radius: 8px;
}
fieldset p {
  clear: both;
  overflow: hidden;
  
}

fieldset p label {
  float: left;
  display : block;
  width : 150px;
  text-align : right;
}

fieldset p > span {
  float: left;
  display : block;
}

fieldset input[type="range"] {
  width : 500px;
}

</style>

<body>
<h1>abcdefg hijklmn opqrstuvwxy z~!</h1>

<div id="container"></div>

<form id="chart_env">
  <fieldset>
    <legend>グラフを見る角度を指定します</legend>

    <p>
      <label>Alpha angle</label>
      <span>
        : <input name="alpha" type="range" min="-30" max="30" value="0">
        <span class="value">&nbsp;</span>
      </span>

    <p>
      <label>Beta angle</label>
      <span>
        : <input name="beta" type="range" min="-30" max="30" value="0">
        <span class="value">&nbsp;</span>
      </span>

    <p>
      <label>ViewDistance</label>
      <span>
        : <input name="viewDistance" type="range" min="1" max="20" value="5">
        <span class="value">&nbsp;</span>
      </span>
  </fieldset>
</form>

  
<script src="jquery_mini.js"></script>
<script src="highcharts.js"></script>
<script src="highcharts-3d.js"></script>
<script src="modules/exporting.js"></script>

<script>
var env = document.forms['chart_env'].elements;
env['alpha'].nextElementSibling.textContent = env['alpha'].value;
env['beta'].nextElementSibling.textContent = env['beta'].value;
env['viewDistance'].nextElementSibling.textContent = env['viewDistance'].value;

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        type: 'column',
        margin: 70,
        options3d: {
            enabled: true,
            alpha: env['alpha'].value,
            beta: env['beta'].value,
            depth: 80,
            viewDistance: env['viewDistance'].value
        }
    },
    title: { text: document.title },
    subtitle: { text: '[ ' + document.querySelector ('h1').textContent + ' ]'},
    plotOptions: { column: { depth: 20 } },
    series: [
      { name: 'A', data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]}
    ]
});


var changeHandlerByForm = (function (chart) {
  return function (event) {
    var e = event.target;
    
    chart.options.chart.options3d[e.name] = parseFloat (e.value);
    chart.redraw(false);
    e.nextElementSibling.textContent = e.value;
  };
}) (chart);


document.querySelector ('#chart_env').addEventListener (
  'input', changeHandlerByForm, false);

</script>