web-dev-qa-db-fra.com

Chart.js créant un graphique linéaire en utilisant des dates

Je n'arrive pas à obtenir Chart.js pour travailler avec les dates. J'ai essayé pas mal de méthodes différentes:

let examChart = document.getElementById("examChart").getContext("2d");
let examLineChart = new Chart(examChart, {
    type: "line",
    data: [
            { t: new Date("2015-3-15 13:3"), y: 12 },
            { t: new Date("2015-3-25 13:2"), y: 21 },
            { t: new Date("2015-4-25 14:12"), y: 32 }
    ],
    options: {
        label: "placeholder"
    }
});

Et:

let examChart = document.getElementById("examChart").getContext("2d");
let examLineChart = new Chart(examChart, {
    type: "line",
    data: [
            { t: "2015-3-15 13:3", y: 12 },
            { t: "2015-3-25 13:2", y: 21 },
            { t: "2015-4-25 14:12", y: 32 }
    ],
    options: {
        label: "placeholder"    
    }
});

Et:

let examChart = document.getElementById("examChart").getContext("2d");
let examLineChart = new Chart(examChart, {
    type: "line",
    data: [
            { t: "Sun Mar 15 2015 12:03:45 GMT+0000 (GMT Standard Time)", y: 12 },
            { t: "Wed Mar 25 2015 12:02:15 GMT+0000 (GMT Standard Time)", y: 21 },
            { t: "Sat Apr 25 2015 13:12:30 GMT+0100 (GMT Daylight Time)", y: 32 }
    ],
    options: {
        label: "placeholder"    
    }
});

Pour couvrir quelques-unes de mes tentatives, je n'arrive pas à comprendre comment définir correctement les dates, même après avoir lu la documentation ( http://www.chartjs.org/docs/latest/axes/cartesian/time. html ) (ils ne donnent pas d'exemple)

Le HTML utilisé:

<div class="container">
    <canvas id="examChart"></canvas>
</div>

Je n'en ai aucune idée, même si j'imagine qu'il s'agit d'un problème assez simple, toute aide serait grandement appréciée.

javascriptdatechart.jsejs
5
Jonathan Woollett-light

Vous devez déplacer vos données dans une dataset. Si vous consultez le manuel d'utilisation , un tableau datasets est utilisé. Le "hint" pour les jeux de données dans les documents pour heure n'est pas aussi évident (voir titre).

Voir l'extrait ci-dessous:

Je viens de copier l'exemple d'utilisation de base et d'insérer les données de votre première tentative (+ ajouté quelques étiquettes)

var ctx = document.getElementById("examChart").getContext("2d");

var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: [new Date("2015-3-15 13:3").toLocaleString(), new Date("2015-3-25 13:2").toLocaleString(), new Date("2015-4-25 14:12").toLocaleString()],
    datasets: [{
      label: 'Demo',
      data: [{
          t: new Date("2015-3-15 13:3"),
          y: 12
        },
        {
          t: new Date("2015-3-25 13:2"),
          y: 21
        },
        {
          t: new Date("2015-4-25 14:12"),
          y: 32
        }
      ],
      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
    }]
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.bundle.js"></script>
<div class="container">
  <canvas id="examChart"></canvas>
</div>

8
Ramiz Wachtler

lorsque vous utilisez l'heure, vous devez utiliser l'heure UTC, car votre heure locale est ajoutée (australie +10 heures/36000 secondes) de sorte que chaque pays ait un fuseau horaire différent . la clé consiste à utiliser moment.utc pour toute conversion de heure 0 secondes = moment.utc ('1970-01-01 00:00:00')

utilisez moment.utc('1970-01-01').add(3600, 'seconds') pour ajouter une valeur, puis à partir des valeurs d'axe des ordonnées ou des éléments de l'info-bulle, vous devez faire référence à

callback: value => {
    date = moment.utc(value);
    if(date.diff(moment.utc('1970-01-01 23:59:59'), 'minutes') === 0) 
    {
        return null;
    };
    date.format('HH:mm:ss');
}

label: (item, data) => data.datasets[item.datasetIndex].label +" "+ 
moment.utc(data.datasets[item.datasetIndex].data[item.index]).format("HH:mm:ss")

https://lopeys.com/ironman/IMAUS_Charts_StackedTimes.htm

0
user10408

Ma suggestion serait d’ajouter la bibliothèque moment.js à votre projet et de formater vos dates en utilisant moment. Aussi, je ne suis pas sûr d'utiliser les "t" et "y" ici. J'ajouterais le temps en tant qu'étiquettes et le ferais correspondre aux données x: 

var data = {
  labels: [moment().format("YYYY-MM-DD"), moment().format("YYYY-MM-DD"), moment().format("YYYY-MM-DD")],
  datasets: [
    {
        data: [12,21,32],
    }
  ]
};

var myBarChart = Chart.Line(canvas,{
data:data,
});

Il y a un exemple de violon ici.

0
Jason Allshorn