Wie füge ich Zeit von einer externen Quelle als X-Achse bezogen auf eine ChartJS Graph?

Aaron:

https://plnkr.co/edit/O4BxVsdOZBc4R68p

fetch(target)
  .then(response => response.json())
  .then(data => {
    var prices = data['Time Series (5min)'];
    for (prop in prices) {
      var stockPrices = prices[prop]['1. open'];
      //change to 2. high, etc
      console.log(`${prop} : ${stockPrices}`);
      stocksData.datasets[0].data.push({x: prop, y: +stockPrices})
      //time x axes are preventing render
      window.lineChart.update();
    }
  })

Ich erhalte Informationen aus der AlphaVantage API und ich versuche, die Zeit, als die X-Achse und dem offenen Preis grafisch darzustellen als die Y-Achse. Allerdings ist die Zeit von der API in einem ungeraden Format und erscheint nicht auf Graphen. Ich habe in Moment.js aussehen, aber das scheint mal zu machen, nicht um sie zu formatieren. Kann mir jemand irgendwelche Hinweise geben auf die Zeit richtig grafisch darstellen?

KeitelDOG:

Ihr Problem kommt von 2 Dinge:

1. Ihr Diagramm config in Optionen mit , xAxesdass sollte xAxisstattdessen
2. Fehlende Labels und korrekte Daten in Diagrammdaten

Hier sind die Codes, die funktionieren:

var stocksData = {
  datasets: [
    {
      label: 'open',
      backgroundColor: 'rgba(104,0,255,0.1)',
      data: [

      ],
    },
  ],
};
window.onload = function() {
  var ctx = document.getElementById('myChart').getContext('2d');

  var lineChart = new Chart(ctx, {
    type: 'line',
    data: stocksData,
    options: {
      scales: {
        xAxis: [
          {
            type: 'linear',
            position: 'bottom',
          },
        ],
      },
    },
  });
  window.lineChart = lineChart;
};

var sym = 'AAPL'; //get from form
var tseries = 'TIME_SERIES_INTRADAY'; //get from form
var target = `https://www.alphavantage.co/query?function=${tseries}&symbol=${sym}&interval=5min&apikey=VA3RZ8B9PPYWKQKN`;
function update () {
fetch(target)
  .then(response => response.json())
  .then(data => {
    var prices = data['Time Series (5min)'];
    for (prop in prices) {
      var stockPrices = prices[prop]['1. open'];
      //change to 2. high, etc
      console.log(`${prop} : ${stockPrices}`);
      //stocksData.datasets[0].data.push({x: prop, y: +stockPrices})
      stocksData.datasets[0].data.push(stockPrices);
      // Format date here. For example with Moment:
      // var date = moment(prop).format('YYYY-MM-DD')
      stocksData.labels.push(prop);
      //time x axes are preventing render
      window.lineChart.update();
    }
  })
  .catch(error => console.error(error));
}

Ein komplettes Format für Chart-Daten wäre wie:

var stocksData = {
  labels: ['date1', 'date2', 'date3', 'date4'],
  datasets: [
    {
      label: 'open',
      backgroundColor: 'rgba(104,0,255,0.1)',
      data: [
        'data1', 'data2', 'data3', 'data4'
      ],
    },
  ],
};

Dann sollte jede Daten und Datum Etikett separat schieben werden:

stocksData.datasets[0].data.push(stockPrices);
stocksData.labels.push(prop);

So formatieren Sie mit Moment können Sie:

var dateStr = moment(prop).format('YYYY-MM-DD');