html5的互动股票图形数据humblefinance。它是类似的股票软件在线显示。它完全用javascript编写，使用prototype和flotr库。它可用于显示任何两个2d的数据集的真实的数值数据共享的轴线。为了获得最佳效果使用firefox, chrome, or safari。
html
<p id="finance">
<p id="labels">
<p id="financetitle">nasdaq:goog</p>
<p 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>
</p>
<p id="daterange"></p>
</p>
</p>
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);
});
});
以上就是html5的互动股票图形数据humblefinance的内容。