我正在尝试创建一个图表,显示比特币价格相对于INR货币的波动。数据来自此链接:Bitcoin API
我已经编写了这段代码,但这是我无法执行的内容。
图表水平轴的标签未正确格式化。例如我不希望在水平轴下方显示“15-12-31 06:05:09”,而是显示“31 Dec”。此外,我希望为图表设置一个标题,并为水平和垂直轴设置相应的标题。
垂直轴上的标签显示30K等数字。我怎么能让它看起来像“30,000”?将鼠标悬停在折线图上时生成的详细信息框也需要相同。
我的代码:
<!DOCTYPE HTML>
<html>
<head>
<title>Graph Test</title>
<meta charset="UTF-8">
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js" type="text/javascript"></script>
<script src="https://jquery-csv.googlecode.com/files/jquery.csv-0.71.js" type="text/javascript"></script>
</head>
<body>
<div id="graph">
<script type="text/javascript">
google.load('visualization', '1.0', {'packages':['line']});
google.setOnLoadCallback(drawChart);
function drawChart()
{
$.get("https://api.bitcoinaverage.com/history/INR/per_hour_monthly_sliding_window.csv", function(csvString)
{
var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});
var data = new google.visualization.arrayToDataTable(arrayData);
var view = new google.visualization.DataView(data);
view.setColumns([0,3]);
var options = {
title : "INR/BTC Exchange Rates",
hAxis: {
title: "Date",
format: 'yyyy-MM-dd',
minValue: data.getColumnRange(0).min,
maxValue: data.getColumnRange(0).max
},
vAxis: {title: data.getColumnLabel(3), minValue: data.getColumnRange(3).min, maxValue: data.getColumnRange(3).max},
legend: 'none',
};
var chart = new google.charts.Line(document.getElementById('graph'));
chart.draw(view,options);
});
};
</script>
</div>
</body>
</html>