HTML5的互动股票图形数据HumbleFinance

html5的互动股票图形数据humblefinance。它是类似的股票软件在线显示。它完全用javascript编写，使用prototype和flotr库。它可用于显示任何两个2d的数据集的真实的数值数据共享的轴线。为了获得最佳效果使用firefox, chrome, or safari。

HTML

    

        
NASDAQ:GOOG
        
 
        1w  
        1m
            3m 
            6m  
            1y
                5y
        
        

    

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);
    });
});

Insou AI

Insou AI 是一款强大的人工智能助手，旨在帮助你轻松创建引人入胜的内容和令人印象深刻的演示。

下载

立即学习“前端免费学习笔记（深入）”；

以上就是HTML5的互动股票图形数据HumbleFinance的内容，更多相关内容请关注PHP中文网（www.php.cn）！