HTML5的互动股票图形数据HumbleFinance

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