[HTML5技术]HTML5的互动股票图形数据HumbleFinance

[tr][td]




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);
 });
});
[/td][/tr]