web-dev-qa-db-fra.com

Chart JS - Utiliser le temps pour les xAxes

j'ai ajouté ce code

scales: 
{
        xAxes: 
        [{
            type: 'time',
            time: 
            {
                unit: 'month',
                displayFormats: { month: 'MM' },
                max: '2017-10-09 18:43:53',
                min: '2017-10-02 18:43:53'
            }
        }]
},

aux options mais cela ne fonctionne pas. Des idées que je fais mal?

FIDDLE ->https://jsfiddle.net/o473y9pw/

javascriptjquerytimechart.js
8
Peter

L'ensemble de données doit être un tableau d'objets avec les propriétés x pour le temps et y pour la valeur. Sinon, comment pourriez-vous dessiner le graphique, non?

$(document).ready(function() {
  var data = [{
      x: new moment().add(-10, "months"),
      y: Math.random() * 100
    },
    {
      x: new moment().add(-8, "months"),
      y: Math.random() * 100
    },
    {
      x: new moment().add(-6, "months"),
      y: Math.random() * 100
    },
    {
      x: new moment().add(-4, "months"),
      y: Math.random() * 100
    },
    {
      x: new moment().add(-2, "months"),
      y: Math.random() * 100
    },
    {
      x: new moment().add(-0, "months"),
      y: Math.random() * 100
    },
  ];

  new Chart(document.getElementById("chartBox"), {
    type: 'line',
    data: {
      datasets: [{
        data: data,
        borderColor: "#3e95cd",
        fill: false
      }]
    },
    options: {
      scales: {
        xAxes: [{
          type: 'time'
        }]
      },
      legend: false
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.bundle.min.js"></script>

<canvas id="chartBox"></canvas>

Fiddle

3
Gökhan Kurt

Vous voudrez peut-être changer quelques petites choses.

  1. Vos données doivent inclure les données time.

  2. Si vous définissez l’unité d’échelle sur month, votre valeur minimale maximale doit être supérieure à un mois pour afficher les échelles réelles.

Voici un exemple de travail simplifié.

https://jsfiddle.net/f2xmkkao/

1
Lee Han Kyeol

Si l’étiquette xAxis est au format date utilisez ce code

time: 
     {
         format: 'MM',
         unit: 'month',
         displayFormats: { month: 'MM' },
         max: '2017-10-09 18:43:53',
         min: '2017-10-02 18:43:53'
     }

Si l’étiquette xAxis est comme quoi vous avez utilisé des chiffres use 

 time:
      {
         format: 'MM',
         unit: 'month',
         parser:'MM',
         displayFormats: { month: 'MM' },
         max: '2017-10-09 18:43:53',
         min: '2017-00-02 18:43:53'
      }
1
Pratheeswaran