Как добавить время, полученное из внешнего источника в виде оси X, на график Chart JS?

Question

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();
    }
  })

Я получаю информацию из API AlphaVantage и пытаюсь отобразить время как ось X и цену открытия как ось Y. Тем не менее, время от API в нечетном формате и не отображается на графике. Я посмотрел в Момент. js, но это, кажется, делает времена, а не форматирует их. Кто-нибудь может дать мне какие-нибудь советы по правильному отображению времени?

Answer 1

Ваша проблема вызвана двумя причинами:

1. Ваша конфигурация диаграммы в опциях с xAxes, которая должна быть xAxis вместо
2. Отсутствуют метки и правильные данные в данных диаграммы

Вот коды, которые работают:

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));
}

Полный формат данных диаграммы будет выглядеть так:

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

Тогда каждая метка данных и даты должна быть пу sh отдельно:

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

Для форматирования с Moment вы можете использовать:

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

Answer 2

«Нечетный» формат времени ( почти ) является стандартным международным форматом даты и времени . В этом случае YYYY-MM-DD HH:MM:SS. Я настоятельно рекомендую вам ознакомиться с ним и использовать его вместо DD/MM/YYYY или MM/DD/YYYY.

. Вы можете исправить свой код, изменив тип оси x на time и добавив соответствующий параметры конфигурации :

options: {
  scales: {
    xAxes: [
      {
        type: 'time',
        ...

Обратите внимание, что вам также нужно изменить свой вызов на Chart. js на версию с моментом. js в комплекте ( или включите момент отдельно):

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>