HTML5的互动股票图形数据HumbleFinance

在线演示 HTML5的互动股票图形数据HumbleFinance。它是类似的股票软件在线显示。它完全用JavaScript编写,使用Pr...

        在线演示
        HTML5的互动股票图形数据HumbleFinance。它是类似的股票软件在线显示。它完全用JavaScript编写,使用Prototype和Flotr库。它可用于显示任何两个2D的数据集的真实的数值数据共享的轴线。为了获得最佳效果使用FireFox, Chrome, or Safari。
HTML
<div id="finance">    <div id="labels">        <div id="financeTitle">NASDAQ:GOOG</div>        <div id="time"> <a onclick="HumbleFinance.zoom(5);">1w</a>  <a onclick="HumbleFinance.zoom(21);">1m</a>            <a            onclick="HumbleFinance.zoom(65);">3m</a> <a onclick="HumbleFinance.zoom(127);">6m</a>  <a onclick="HumbleFinance.zoom(254);">1y</a>                <a                onclick="HumbleFinance.zoom(1265);">5y</a>        </div>        <div id="dateRange"></div>    </div></div>
JS

Event.observe(document, 'dom:loaded', function () {    prettyPrint();    HumbleFinance.trackFormatter = function (obj) {        var x = Math.floor(obj.x);        var data = jsonData[x];        var text = data.date + " Price: " + data.close + " Vol: " + data.volume;        return text;    };    HumbleFinance.yTickFormatter = function (n) {        if (n == this.axes.y.max) {            return false;        }        return '$' + n;    };    HumbleFinance.xTickFormatter = function (n) {        if (n == 0) {            return false;        }        var date = jsonData[n].date;        date = date.split(' ');        date = date[2];        return date;    }    HumbleFinance.init('finance', priceData, volumeData, summaryData);    HumbleFinance.setFlags(flagData);    var xaxis = HumbleFinance.graphs.summary.axes.x;    var prevSelection = HumbleFinance.graphs.summary.prevSelection;    var xmin = xaxis.p2d(prevSelection.first.x);    var xmax = xaxis.p2d(prevSelection.second.x);    $('dateRange').update(jsonData[xmin].date + ' - ' + jsonData[xmax].date);    Event.observe(HumbleFinance.containers.summary, 'flotr:select', function (e) {        var area = e.memo[0];        xmin = Math.floor(area.x1);        xmax = Math.ceil(area.x2);        var date1 = jsonData[xmin].date;        var date2 = jsonData[xmax].date;        $('dateRange').update(jsonData[xmin].date + ' - ' + jsonData[xmax].date);    });});

更多 onclick 相关内容