新手上路，请多包涵

我目前正在尝试从 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 并将其包含在脚本标签中。不幸的是我无法解决这个问题。

我的 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>

原文由 Pascal S 发布，翻译遵循 CC BY-SA 4.0 许可协议

javascript chart.js blockchain.info-api

阅读 401

2 个回答

得票最新

社区维基

发布于
2022-12-15

✓ 已被采纳

我运行了您的脚本，在每个点显示金钱的方式上进行了一些增强后效果很好，但是由于查询返回 365 个元素的数据太多而无法在图表中显示，这就是我认为存在重叠标签的原因。我注意到数组中的每个值都有相同的日期（1970 年 1 月 17 日星期六 xx:yy:zz 和 1970 年 1 月 18 日星期日 qq:ww:ee）但时间不同。然后我按这些日期对数据进行分组，如下所示：

这是整个脚本。

 $('#getData').on('click', function(){
		var requestURL = 'https://blockchain.info/de/charts/market-price?format=json&cors=true';
		var request = new XMLHttpRequest();
		let newData = [], labels = [];
		let sameDate = "", previousDate = "", value = 0;
		request.open('GET', requestURL);
		request.responseType = 'json';
		request.send();
		request.onload = function() {

			// Group the Data by Day
			request.response.values.forEach(function(item,i){
				if (previousDate !== getDateFormat(moment(item.x)._d) )
				{
					value = 0;
					value = item.y;

					sameDate = getDateFormat(moment(item.x)._d);

					request.response.values.forEach(function(ele, j){
						if ( j > i){
							if (sameDate === getDateFormat(moment(ele.x)._d)){
								value+= ele.y;
								previousDate = getDateFormat(moment(ele.x)._d);
							}
						}

					});
					newData.push({x:sameDate, y:value});
					labels.push(sameDate);
				}
			});

		    drawChart(newData,labels);
		}

		function getDateFormat(momentType)
		{
			console.log(momentType);
			return momentType.getDate()+"-"+(momentType.getMonth()+1)+"-"+momentType.getUTCFullYear();
		}

		function drawChart(jsonObj,label) {

		    var ctx = document.getElementById("myChart");
		    var myChart = new Chart(ctx, {
		        type: 'line',
		        data: {
		            labels: label,
		            datasets: [{
		            	label: "Average USD",
		            	data:jsonObj}]
		        },
		        options: {
		            scales: {
		                yAxes: [{
		                    ticks: {
		                        beginAtZero:true
		                    }
		                }],
		                xAxes: [{
		                    display: true,
		                    scaleLabel: {
		                        display: true,
		                        labelString: 'value'
		                    }
		                }]
		            },
		            plugins: {
		            	datalabels:{
		            		borderRadius: 4,
							color: 'black',
							anchor: 'end',
							align: 'end',
							backgroundColor: function(context) {
								return context.dataset.borderColor;
							},
							formatter: function(value, context){
								// show the value on the point
								return Number(value.y).toFixed(2);
							},
		            	}
		            }
		        }
		    });
		}
	});