如何按天标记 Chart.js 中的 x 轴？

Question

我目前正在尝试从 blockchain.info 获取数据并将其显示在 Chart.js 的简单 JavaScript 文件中。

如果我的 xAxes 类型是 'linear'，它工作得很好，但在那种情况下，x 轴上的标签显示为数字 unix 时间戳。

xAxes: [{
    type: 'linear',
    time: {
        unit: 'day',
        tooltipFormat: 'lll',
    }
}]

我希望标签以天为单位显示（例如 2018 年 1 月 27 日）或按月分组（图表上有 30 个点，带有 1 个标签 -> 月份）。出于这个原因，我将 xAxes 类型更改为 'time'，然后导致以下错误：

"Uncaught Error: Chart.js - Moment.js could not be found! You must include it before Chart.js to use the time scale. Download at 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>

Answer 1

在上图中你可以看到数据，请注意我将它分成三个数组，在图表中我有两个数据集 (Ingreso(x[date],y[value]), Egreso(x[date ],y[vlue])) 和 "Label" 即填充 x 轴标签的那个。这就是我的做法！

所以在标签选项中，我用日期

填充我的标签数组

Answer 2

此外，这是我的整个脚本。

    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 fillLabel(jsonObj){
    var label = [];
    var arr = jsonObj["values"];
    arr.forEach(element => {
        label.push((element.x));    
    });    
    return label;
}

function drawChart(jsonObj) {

    var ctx = document.getElementById("myChart");
    var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: fillLabel(jsonObj),
            datasets: [{
                label: jsonObj["name"],
                data: jsonObj["values"],
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero:true
                    }
                }],
                xAxes: [{
                    type: 'time',
                    time: {
                        unit: 'second',
                        displayFormats: {
                            millisecond: 'h:mm:ss.SSS a',
                            second: 'D MMM',
                            minute: 'D MMM',
                            hour: 'hA',
                            day: 'MMM D',
                            week: 'll',
                            month: 'MMM YYYY',
                            quarter: '[Q]Q - YYYY',
                            year: 'YYYY'
                        },                            
                    },
                    display: true,
                    scaleLabel: {
                        display: true,
                        labelString: 'value'
                    }                        
                }]                    
            }
        }
    });            
}

Answer 3

我运行你的脚本，在每个点显示钱的方式上进行了一些改进后工作正常，但由于查询 returns 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);
       },
               }
              }
          }
      });            
  }    
 });

如何按天标记 Chart.js 中的 x 轴？

How to label x-Axis in Chart.js by days?

javascript

chart.js

blockchain.info-api