我目前正在尝试从 blockchain.info 获取数据并将其显示在一个简单的 JavaScript 文件中的 Chart.js 上。
如果我的 xAxes 类型是“线性”,它就可以正常工作,但在这种情况下,x 轴上的标签会显示带有数字 unix 时间戳。
xAxes: [{
type: 'linear',
time: {
unit: 'day',
tooltipFormat: 'lll',
}
}]
我希望标签以天显示(例如 2018 年 1 月 27 日)或按月分组(图表上 30 个点,1 个标签 -> 月)。出于这个原因,我将 xAxes 类型更改为“时间”,然后导致以下错误:
“未捕获的错误:Chart.js - 找不到 Moment.js!您必须在 Chart.js 之前包含它才能使用时间刻度。在https://momentjs.com下载”。
我玩过 momentjs 并将其包含在 script 标签中。不幸的是,我无法解决这个问题。
我的 JSON 中的数据如下所示:
{
"status": "ok",
"name": "Confirmed Transactions Per Day",
"unit": "Transactions",
"period": "day",
"description": "The number of daily confirmed Bitcoin transactions.",
"values": [
{
"x": 1442534400, // Unix timestamp (2015-09-18T00:00:00+00:00)
"y": 188330.0
},
...
}
这是我的完整代码:
var requestURL = 'https://blockchain.info/de/charts/market-price?format=json&cors=true';
var request = new XMLHttpRequest();
request.open('GET', requestURL);
request.responseType = 'json';
request.send();
request.onload = function() {
var response = request.response;
drawChart(response);
}
function drawChart(jsonObj) {
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: jsonObj["values"],
datasets: [{
label: jsonObj["name"],
data: jsonObj["values"],
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}],
xAxes: [{
type: 'time',
time: {
unit: 'day',
tooltipFormat: 'lll',
}
}]
}
}
});
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<script src="node_modules/chart.js/dist/Chart.js"></script>
<script srx="myChart.js"></script>
<body>
<canvas id="myChart" width="100%" height="100%"></canvas>
</body>
</html>