load.js

株価チャート表示　サンプルプログラム


load.js
ブラウザにchart.htmlを表示したときに、一番最初に実行されます。
共通の外部変数をこのファイルに宣言しています。
チャートの表示位置及び、チャートの左側に表示される金額や値の表示位置を調整する場合は、このファイルを修正します。修正方法は、ソースリストの下に記載しています。
var gStartIdx;                  //チャート表示開始インデックス
var gEndIdx;                    //チャート表示終了インデックス
var gCrntYMIdx;                 //表示中年月インデックス
var gCtx;                       //キャンバスコンテキスト
var gMonthDataNum = new Array();//各月のデータ数
var gYear = new Array();        //年
var gMonth = new Array();       //月
var gYmd = new Array();         //年/月/日
var gSt = new Array();          //始値
var gHi = new Array();          //高値
var gLo = new Array();          //安値
var gEd = new Array();          //終値
var gDk = new Array();          //出来高

//ロード
onload = function() {
    var inpfile;
    var file;
    var fileList;
    var reader;

    if (!window.File) {
        window.alert("本ブラウザではFile APIが使えませんので、チャート表示できません。");
        return;
    }

    //ブラウザ判定し、表示位置調整
    DspPosAdjst();

    //ファイル選択
    inpfile = document.getElementById("inpfile");
    inpfile.onchange = function() {
        if (!inpfile.value) {
            return; //ファイル未選択
        }
        file = document.querySelector('#inpfile');
        fileList = file.files;
        reader = new FileReader();
        reader.readAsText(fileList[0]);	//ファイル読込

        //ファイル読込完了
        reader.onload = function(){
            init();					//外部変数初期化
            getChartDate(reader);	//チャートデータ取得
            dspChart();				//チャート表示
            pageBtnCntrl();			//頁ボタン制御
        }
    }
}

//ブラウザ判定し、表示位置調整
function DspPosAdjst() {
    var userAgent = window.navigator.userAgent.toLowerCase();
    if (userAgent.indexOf('trident') != -1) {
        //Internet Explorer で表示位置がずれている場合は、ここを修正する
        //日足チャート
        document.getElementById('divchart').style.top = "88px";
        document.getElementById('divchart').style.left = "78px";
        document.getElementById('chart1').style.top = "81px";
        document.getElementById('chart1').style.left = "10px";
        document.getElementById('chart2').style.top = "120px";
        document.getElementById('chart2').style.left = "10px";
        document.getElementById('chart3').style.top = "159px";
        document.getElementById('chart3').style.left = "10px";
        document.getElementById('chart4').style.top = "198px";
        document.getElementById('chart4').style.left = "10px";
        document.getElementById('chart5').style.top = "237px";
        document.getElementById('chart5').style.left = "10px";
        document.getElementById('chart6').style.top = "276px";
        document.getElementById('chart6').style.left = "10px";
        document.getElementById('chart7').style.top = "315px";
        document.getElementById('chart7').style.left = "10px";
        document.getElementById('chart8').style.top = "354px";
        document.getElementById('chart8').style.left = "10px";
        document.getElementById('chart9').style.top = "393px";
        document.getElementById('chart9').style.left = "10px";
        document.getElementById('chart10').style.top = "432px";
        document.getElementById('chart10').style.left = "10px";
        document.getElementById('chart11').style.top = "471px";
        document.getElementById('chart11').style.left = "10px";
        //MACD
        document.getElementById('divmacd').style.top = "519px";
        document.getElementById('divmacd').style.left = "78px";
        document.getElementById('macd1').style.top = "525px";
        document.getElementById('macd1').style.left = "10px";
        document.getElementById('macd2').style.top = "548px";
        document.getElementById('macd2').style.left = "10px";
        document.getElementById('macd3').style.top = "571px";
        document.getElementById('macd3').style.left = "10px";
        document.getElementById('macd4').style.top = "594px";
        document.getElementById('macd4').style.left = "10px";
        document.getElementById('macd5').style.top = "617px";
        document.getElementById('macd5').style.left = "10px";
        //ストキャスティックス
        document.getElementById('divstcas').style.top = "658px";
        document.getElementById('divstcas').style.left = "78px";
        document.getElementById('stcas1').style.top = "673px";
        document.getElementById('stcas1').style.left = "10px";
        document.getElementById('stcas2').style.top = "706px";
        document.getElementById('stcas2').style.left = "10px";
        document.getElementById('stcas3').style.top = "739px";
        document.getElementById('stcas3').style.left = "10px";
        //RSI
        document.getElementById('divrsi').style.top = "791px";
        document.getElementById('divrsi').style.left = "78px";
        document.getElementById('rsi1').style.top = "816px";
        document.getElementById('rsi1').style.left = "10px";
        document.getElementById('rsi2').style.top = "839px";
        document.getElementById('rsi2').style.left = "10px";
        document.getElementById('rsi3').style.top = "862px";
        document.getElementById('rsi3').style.left = "10px";
    } else if(userAgent.indexOf('edge') != -1) {
        //Microsoft Edge で表示位置がずれている場合は、ここを修正する
        //日足チャート
        document.getElementById('divchart').style.top = "95px";
        document.getElementById('divchart').style.left = "78px";
        document.getElementById('chart1').style.top = "88px";
        document.getElementById('chart1').style.left = "10px";
        document.getElementById('chart2').style.top = "127px";
        document.getElementById('chart2').style.left = "10px";
        document.getElementById('chart3').style.top = "166px";
        document.getElementById('chart3').style.left = "10px";
        document.getElementById('chart4').style.top = "205px";
        document.getElementById('chart4').style.left = "10px";
        document.getElementById('chart5').style.top = "244px";
        document.getElementById('chart5').style.left = "10px";
        document.getElementById('chart6').style.top = "283px";
        document.getElementById('chart6').style.left = "10px";
        document.getElementById('chart7').style.top = "322px";
        document.getElementById('chart7').style.left = "10px";
        document.getElementById('chart8').style.top = "361px";
        document.getElementById('chart8').style.left = "10px";
        document.getElementById('chart9').style.top = "400px";
        document.getElementById('chart9').style.left = "10px";
        document.getElementById('chart10').style.top = "439px";
        document.getElementById('chart10').style.left = "10px";
        document.getElementById('chart11').style.top = "478px";
        document.getElementById('chart11').style.left = "10px";
        //MACD
        document.getElementById('divmacd').style.top = "526px";
        document.getElementById('divmacd').style.left = "78px";
        document.getElementById('macd1').style.top = "534px";
        document.getElementById('macd1').style.left = "10px";
        document.getElementById('macd2').style.top = "557px";
        document.getElementById('macd2').style.left = "10px";
        document.getElementById('macd3').style.top = "580px";
        document.getElementById('macd3').style.left = "10px";
        document.getElementById('macd4').style.top = "603px";
        document.getElementById('macd4').style.left = "10px";
        document.getElementById('macd5').style.top = "626px";
        document.getElementById('macd5').style.left = "10px";
        //ストキャスティックス
        document.getElementById('divstcas').style.top = "665px";
        document.getElementById('divstcas').style.left = "78px";
        document.getElementById('stcas1').style.top = "684px";
        document.getElementById('stcas1').style.left = "10px";
        document.getElementById('stcas2').style.top = "717px";
        document.getElementById('stcas2').style.left = "10px";
        document.getElementById('stcas3').style.top = "750px";
        document.getElementById('stcas3').style.left = "10px";
        //RSI
        document.getElementById('divrsi').style.top = "798px";
        document.getElementById('divrsi').style.left = "78px";
        document.getElementById('rsi1').style.top = "829px";
        document.getElementById('rsi1').style.left = "10px";
        document.getElementById('rsi2').style.top = "852px";
        document.getElementById('rsi2').style.left = "10px";
        document.getElementById('rsi3').style.top = "875px";
        document.getElementById('rsi3').style.left = "10px";
    } else if(userAgent.indexOf('chrome') != -1) {
        //Google Chrome で表示位置がずれている場合は、ここを修正する
        //日足チャート
        document.getElementById('divchart').style.top = "105px";
        document.getElementById('divchart').style.left = "76px";
        document.getElementById('chart1').style.top = "95px";
        document.getElementById('chart1').style.left = "8px";
        document.getElementById('chart2').style.top = "134px";
        document.getElementById('chart2').style.left = "8px";
        document.getElementById('chart3').style.top = "173px";
        document.getElementById('chart3').style.left = "8px";
        document.getElementById('chart4').style.top = "212px";
        document.getElementById('chart4').style.left = "8px";
        document.getElementById('chart5').style.top = "251px";
        document.getElementById('chart5').style.left = "8px";
        document.getElementById('chart6').style.top = "290px";
        document.getElementById('chart6').style.left = "8px";
        document.getElementById('chart7').style.top = "329px";
        document.getElementById('chart7').style.left = "8px";
        document.getElementById('chart8').style.top = "368px";
        document.getElementById('chart8').style.left = "8px";
        document.getElementById('chart9').style.top = "407px";
        document.getElementById('chart9').style.left = "8px";
        document.getElementById('chart10').style.top = "446px";
        document.getElementById('chart10').style.left = "8px";
        document.getElementById('chart11').style.top = "485px";
        document.getElementById('chart11').style.left = "8px";
        //MACD
        document.getElementById('divmacd').style.top = "543px";
        document.getElementById('divmacd').style.left = "76px";
        document.getElementById('macd1').style.top = "547px";
        document.getElementById('macd1').style.left = "8px";
        document.getElementById('macd2').style.top = "570px";
        document.getElementById('macd2').style.left = "8px";
        document.getElementById('macd3').style.top = "593px";
        document.getElementById('macd3').style.left = "8px";
        document.getElementById('macd4').style.top = "616px";
        document.getElementById('macd4').style.left = "8px";
        document.getElementById('macd5').style.top = "639px";
        document.getElementById('macd5').style.left = "8px";
        //ストキャスティックス
        document.getElementById('divstcas').style.top = "684px";
        document.getElementById('divstcas').style.left = "76px";
        document.getElementById('stcas1').style.top = "698px";
        document.getElementById('stcas1').style.left = "8px";
        document.getElementById('stcas2').style.top = "731px";
        document.getElementById('stcas2').style.left = "8px";
        document.getElementById('stcas3').style.top = "764px";
        document.getElementById('stcas3').style.left = "8px";
        //RSI
        document.getElementById('divrsi').style.top = "819px";
        document.getElementById('divrsi').style.left = "76px";
        document.getElementById('rsi1').style.top = "843px";
        document.getElementById('rsi1').style.left = "8px";
        document.getElementById('rsi2').style.top = "866px";
        document.getElementById('rsi2').style.left = "8px";
        document.getElementById('rsi3').style.top = "889px";
        document.getElementById('rsi3').style.left = "8px";
    } else {
        //上記以外のブラウザで、表示位置がずれている場合は、ここを修正する
        //取り敢えずGoogle Chrome と同じ値としている
        //日足チャート
        document.getElementById('divchart').style.top = "105px";
        document.getElementById('divchart').style.left = "76px";
        document.getElementById('chart1').style.top = "95px";
        document.getElementById('chart1').style.left = "8px";
        document.getElementById('chart2').style.top = "134px";
        document.getElementById('chart2').style.left = "8px";
        document.getElementById('chart3').style.top = "173px";
        document.getElementById('chart3').style.left = "8px";
        document.getElementById('chart4').style.top = "212px";
        document.getElementById('chart4').style.left = "8px";
        document.getElementById('chart5').style.top = "251px";
        document.getElementById('chart5').style.left = "8px";
        document.getElementById('chart6').style.top = "290px";
        document.getElementById('chart6').style.left = "8px";
        document.getElementById('chart7').style.top = "329px";
        document.getElementById('chart7').style.left = "8px";
        document.getElementById('chart8').style.top = "368px";
        document.getElementById('chart8').style.left = "8px";
        document.getElementById('chart9').style.top = "407px";
        document.getElementById('chart9').style.left = "8px";
        document.getElementById('chart10').style.top = "446px";
        document.getElementById('chart10').style.left = "8px";
        document.getElementById('chart11').style.top = "485px";
        document.getElementById('chart11').style.left = "8px";
        //MACD
        document.getElementById('divmacd').style.top = "543px";
        document.getElementById('divmacd').style.left = "76px";
        document.getElementById('macd1').style.top = "547px";
        document.getElementById('macd1').style.left = "8px";
        document.getElementById('macd2').style.top = "570px";
        document.getElementById('macd2').style.left = "8px";
        document.getElementById('macd3').style.top = "593px";
        document.getElementById('macd3').style.left = "8px";
        document.getElementById('macd4').style.top = "616px";
        document.getElementById('macd4').style.left = "8px";
        document.getElementById('macd5').style.top = "639px";
        document.getElementById('macd5').style.left = "8px";
        //ストキャスティックス
        document.getElementById('divstcas').style.top = "684px";
        document.getElementById('divstcas').style.left = "76px";
        document.getElementById('stcas1').style.top = "698px";
        document.getElementById('stcas1').style.left = "8px";
        document.getElementById('stcas2').style.top = "731px";
        document.getElementById('stcas2').style.left = "8px";
        document.getElementById('stcas3').style.top = "764px";
        document.getElementById('stcas3').style.left = "8px";
        //RSI
        document.getElementById('divrsi').style.top = "819px";
        document.getElementById('divrsi').style.left = "76px";
        document.getElementById('rsi1').style.top = "843px";
        document.getElementById('rsi1').style.left = "8px";
        document.getElementById('rsi2').style.top = "866px";
        document.getElementById('rsi2').style.left = "8px";
        document.getElementById('rsi3').style.top = "889px";
        document.getElementById('rsi3').style.left = "8px";
    }
}


//会社名クリック処理
function yho(code) {
    var url = "http://stocks.finance.yahoo.co.jp/stocks/detail/?code=" + code;
    window.open(url,"yho");
}

//再表示
// scrollCnt : スクロール月数
function redsp(scrollCnt) {
    dspScroll(scrollCnt);	//スクロール表示
    pageBtnCntrl();			//頁ボタン制御
}

//外部変数初期化
function init() {
    gMonthDataNum.length = 0;
    gYear.length = 0;
    gMonth.length = 0;
    gYmd.length = 0;
    gSt.length = 0;
    gHi.length = 0;
    gLo.length = 0;
    gEd.length = 0;
    gDk.length = 0;
}

//チャートデータ取得
// reader : リーダーオブジェクト
function getChartDate(reader) {
    var i;
    var lines;
    var csv;
    var elm;
    var n = 0;

    if (reader.result.match(/\r/)) {
        lines = reader.result.split("\r\n");
    } else {
        lines = reader.result.split("\n");
    }
    //最後の空白行を削除
    for (i = lines.length - 1; i > 1; i--) { 
        if (lines[i].trim() != "") {
            break;
        }
    lines.pop();
    }

    //コード、会社名表示
    csv = lines[0].split(",");
    elm = document.getElementById("cdnm");
    elm.text = csv[0] + "　" + csv[1];
    elm.setAttribute("onclick", "javascript:yho('" + csv[0] + "');return false;");

    //日足データ取得
    for (i = 1; i < lines.length; i++) {
        n = makeData(lines[i], n);
    }
    gMonthDataNum.push(n);

    //先頭年月、最終年月表示
    document.getElementById("firstYM").text = gYear[0] + "/" + gMonth[0];
    document.getElementById("lastYM").text =
                    gYear[gYear.length-1] + "/" + gMonth[gMonth.length-1];

    //データが７ヶ月分ないとき年月を設定
    for (i = gYear.length; i < 7; i++) {
        gMonthDataNum.push(0);	//年月の日数
        gYear.push("");
        gMonth.push("");
    }
}

//年月日、始値、高値、安値、終値、出来高を取得
// line : csvの1行データ
// n    : 月の日数
function makeData(line, n) {
    var csv = line.split(",");
    var date = csv[0].split("/");

    if (gYear.length == 0) {
    gYear.push(date[0]);	//年
        gMonth.push(date[1]);	//月
    } else if (gYear[gYear.length - 1] != date[0] ||
               gMonth[gMonth.length - 1] != date[1]) {
        gMonthDataNum.push(n);	//年月の日数
        n = 0;
        gYear.push(date[0]);	//年
        gMonth.push(date[1]);	//月
    }
    n++;	//各月の日数＋１

    gYmd.push(csv[0]);	//年月日
    gSt.push(parseFloat(csv[1]));	//始値
    gHi.push(parseFloat(csv[2]));	//高値
    gLo.push(parseFloat(csv[3]));	//安値
    gEd.push(parseFloat(csv[4]));	//終値
    gDk.push(parseFloat(csv[5]));	//出来高
    return n;
}

//頁ボタン制御
function pageBtnCntrl() {
    var ableNum;

    pageBtnCntrlSub("prev1", 1, gCrntYMIdx);
    pageBtnCntrlSub("prev2", 2, gCrntYMIdx);
    pageBtnCntrlSub("prev6", 6, gCrntYMIdx);
    ableNum = gYear.length - 7 - gCrntYMIdx;
    pageBtnCntrlSub("next1", 1, ableNum);
    pageBtnCntrlSub("next2", 2, ableNum);
    pageBtnCntrlSub("next6", 6, ableNum);
}

//頁ボタン制御サブ
// idname : 頁ボタンID名
// p1     : スライドする月数
// p2     : スライド可能な月数
function pageBtnCntrlSub(idname, p1, p2) {
    var elm = document.getElementById(idname);

    if (p1 <= p2) {
        elm.disabled = false;
    } else {
        elm.disabled = true;
    }
}
チャートの表示位置調整

表示位置は、topの数値を小さくすると上に、大きくすると下に移動します。
leftの数値を小さくすると左に、大きくすると右に移動します。
例えば、右下に調整したい場合は、次のようにします。
document.getElementById('divchart').style.top = "88px";　の"88px"を"95px"に修正
document.getElementById('divchart').style.left = "78px";　の"78px"を"86px"に修正
load.jsファイルを修正したら保存してください。
その後、ブラウザで最新の情報に更新してから、チャートを再表示してください。
Internet Explorerの表示位置を調整する場合
Microsoft Edgeの表示位置を調整する場合
Google Chromeの表示位置を調整する場合
上記以外のブラウザの表示位置を調整する場合

管理人は、本サンプルプログラムを用いて行う判断の一切について責任を負うのもではありません。	ct7m-fnk@asahi-net.or.jp