JavaScriptで株価チャート

stockChart.md

D3.js + techan.jsで出来高付き日足チャートを描画、メモ

note: techan = technical chart analisys

1. 用意するデータ

data = [
{"Date":"2015-04-06","Open":19295.03,"High":19424.09,"Low":19241.29,
  "Close":19397.98,"Volume":19277.54},
…
]

2. svg画像を作りながらチャートを描画

// set the dimensions and margins of the graph
var margin = {top: 20, right: 20, bottom: 30, left: 50},
width = 960 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;

// parse the dat
// append the svg obgect to the body of the page
// appends a 'group' element to 'svg'
// moves the 'group' element to the top left margin
var svg = d3.select("body").append("svg")
          .attr("width", width + margin.left + margin.right)
          .attr("height", height + margin.top + margin.bottom)
          .append("g")
          .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

3. 日足の描画

// set the ranges
  var x = techan.scale.financetime()
        .range([0, width]);

  var y = d3.scaleLinear()
        .range([300, 0]);

// define the candlestick
  var candlestick = techan.plot.candlestick()
        .xScale(x)
        .yScale(y);

      // Add the candlestick
  svg.append("g")
              .attr("class", "candlestick")
              .data([data])
              .call(candlestick); // candlestickをレシーバーにdata[data]メソッドを実行

4. 出来高の描画

// define the volume
  var volume = techan.plot.volume()
        .xScale(x)
        .yScale(yVolume);

// Add the volume
　　svg.append("g")
              .attr("class", "volume")
              .data([data])
              .call(volume); // volumeをレシーバーにdata[data])メソッドを実行

参考: techan.jsのexample, [rails 出来高 techan.js]

amCharts.jsの場合

1. AmCharts.makeChart()クラス・メソッドを実行すれば、マウント・ポイントが書き換わる

<div id="chartdiv" width="100%" height="500px"></div>

var chart = AmCharts.makeChart( "chartdiv", configChart )

2. カスタマイズは、configChartオブジェクトで行う

var configChart = {}
configChart.type = "stock"
configChart.dataprovider = "chartData"

3. データは、chartData配列で与える

配列はD3.jsと同じ

4. 出来高グラフは、configChart.panels配列にpanelConfigを与える事で実現

configChart.panels[0].title = "株価"

Google Chartの場合

🔹Google Chartまとめ

1. library初期化, google.loadの呼び出し
2. 描画関数の登録, google.setOnLoadCallback(drawChart), 引数に描画関数◀️ここ⚠️
3. 描画関数の定義function drawChart a. 配列の配列から、dataを作成(google.visualization.arrayToDataTable) b. グラフオプション c. 描画領域div#chartdivの指定(chart)と領域への描画メソッド呼び出しchart.draw(data, option)

google.load("visualization", "1", { // step 1
  packages: ["corechart"]
});
google.setOnLoadCallback(drawChart); // Step 2

function drawChart() {
// ========== データ設定 ========== 
  var data = new google.visualization.arrayToDataTable(jsonData, true);

// ========== 表示設定 ========== 
  var options = {
    legend: 'none',
    title: code,
      chartArea: {
        width: "90%",
          height: "80%"
      },
      vAxis: {
        title: "Yen",
        gridlines: {color: '#333', count: 8}
      },
      hAxis: {
        textStyle: {fontSize: 12},
        slantedTextAngle: 45,
        maxAlternation: 20,
        showTextEvery: 4,
        gridlines: {color: '#333', count: 8}
        // 縦軸が欲しいonly continuous Axis?
      }
  };
// ========== 描画処理 ========== 
  var chart = new google.visualization.CandlestickChart(
    document.getElementById("chart_div"));                                      

  chart.draw(data, options);
}; // end of func