IEのfilter、matrixを使って折れ線グラフを作成

別にグラフを使うような高度な用事はないし、これからも必要ない気がするけど
単なる興味本位だけで、挑戦してみました。
結構やっている人もいて珍しくないだろうけど。

最初、差分が間隔で均等に傾くように
線の1pxずつ、1pxの大きさのタグを作成して
差分を間隔で割ったものを掛けて位置を決めて
とやって出来はしたけど、当たり前のように画面が重くなるので
違う方法を考えた。

canvas？とやらで出来るみたいだけど
自分のIEでは使えないので、filterのmatrixを使うことにした。
1pxが1ということで。
作成したFunctionオブジェクトに、配列にした値を渡すと折れ線グラフに。

createGraph([30, 89, 50, 200]);


function createGraph(arr_data) {

    var num_top        = 300;    //最初のTopの値
    var num_left       = 100;    //最初のLeftの値
    var num_s          = 0;      //最初の値
    var num_w          = 100;    //間隔(px)
    var str_line_color = '#000'; //線の色

    var obj_frag = document.createDocumentFragment();
    var num_top_next = num_top;
    for(var i in arr_data) {

        //ラインを作成
        var elm      = document.createElement('div');
        var num_deff = num_s - arr_data[i];
        var num_m21  = num_deff / num_w;
        with(elm.style) {
            position  = 'absolute';
            top       = (num_deff < 0) ? num_top_next + num_deff: num_top_next;
            left      = num_left;
            fontSize  = 0;
            width     = num_w;
            height    = parseInt(num_deff.toString().replace(/-/, ''));
            borderTop = '1 solid ' + str_line_color;
            filter    = 'progid:dximagetransform.microsoft.matrix(m21='
                    + String(num_m21)+ ' sizingmethod="auto expand")';
        };
        obj_frag.appendChild(elm);

        //点を作成
        var elm_ten = document.createElement('a');
        elm_ten.innerText = '●';
        with(elm_ten.style) {
            fontSize = '6px';
            position = 'absolute';
            top      = num_top - arr_data[i] - 3;
            left     = num_left + num_w - 3;
        };
        obj_frag.appendChild(elm_ten);

        //表示する数値を作成
        var elm_num = document.createElement('span');
        elm_num.innerHTML = arr_data[i];
        with(elm_num.style) {
            fontSize = '15px';
            position = 'absolute';
            top      = num_top - arr_data[i] - ((num_deff > 0) ? - 5: 20);
            left     = num_left + num_w - (5 * arr_data[i].toString().length - 1);
        };
        obj_frag.appendChild(elm_num);

        num_top_next = num_top - arr_data[i];
        num_left    += num_w;
        num_s        = arr_data[i];
    };
    document.body.appendChild(obj_frag);
};

filterのm21という値が、四角形の左右の辺のトップの位置を動かすものらしく
差分を、作成するエレメントの高さにして、それを一定の割合のm21を変えればいい
と思っていたけど、点と点の間隔によっては、うまく繋がらなかった。
そのm21の値は

差分 / (点と点の間隔(px);

これでいけた。

修正

×差分 * 0.1 / (点と点の間隔(px) / 10);
○差分 / (点と点の間隔(px);

これでＯＫだった。
両方10で割ってたｗ