Я использую диаграмму. js Я отправил свои значения времени, выбрасываю свои API как метку времени, знаю, что мне нужно показать их на графике в формате даты - PullRequest
Новая
       26

Я использую диаграмму. js Я отправил свои значения времени, выбрасываю свои API как метку времени, знаю, что мне нужно показать их на графике в формате даты

1 голос
/ 04 апреля 2020 
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
   type: 'line',
   data: {
       labels: {{ labels}},//labels are the time values                         
       datasets: [{
           label: '# temperature',
           data: {{ datas}},
           backgroundColor: [
               'rgba(255, 99, 132, 0.2)',
               'rgba(54, 162, 235, 0.2)',
               'rgba(255, 206, 86, 0.2)',
               'rgba(75, 192, 192, 0.2)',
               'rgba(153, 102, 255, 0.2)',
               'rgba(255, 159, 64, 0.2)'
           ],
           borderColor: [
               'rgba(255, 99, 132, 1)',
               'rgba(54, 162, 235, 1)',
               'rgba(255, 206, 86, 1)',
               'rgba(75, 192, 192, 1)',
               'rgba(153, 102, 255, 1)',
               'rgba(255, 159, 64, 1)'
           ],
           borderWidth: 1
       }]
   },
   options: {
       scales: {
           yAxes: [{
               ticks: {
                   beginAtZero: true
               }
           }]

       }
   }
});

1 Ответ

1 голос
/ 05 апреля 2020

Вам необходимо определить xAxis как декартову ось времени с единицей измерения, соответствующей вашим данным. По умолчанию формат отображения «часа» - «hA» (например, «2PM»). Вероятно, вам также следует использовать тот же формат для отображения всплывающих подсказок. 

xAxes: [{
  type: 'time',
  time: {
    unit: 'hour',
    tooltipFormat: 'hA' 
  }
}],

Обратите внимание, что в диаграмме. js используется Moment. js для функциональности оси времени. Поэтому вам следует использовать связанную версию Chart. js, которая включает Момент. js в одном файле.

Пожалуйста, ознакомьтесь с приведенным ниже фрагментом кода. 

const labels = [1585725538000, 1585729616000, 1585742414000, 1585812498000, 1585842536000, 1585918521000, 1585938665000, 1585948685000];
const datas = [15, 16, 15, 17, 12, 13, 11, 12];

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: labels,
    datasets: [{
      label: '# temperature',
      data: datas,
      backgroundColor: 'rgba(255, 99, 132, 0.2)',
      borderColor: 'rgba(255, 99, 132, 1)',
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      xAxes: [{
        type: 'time',
        time: {
          unit: 'hour',
          tooltipFormat: 'hA' 
        }
      }],
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script> 
<canvas id="myChart" height="90"></canvas>
...