tableau js - diagramme à barres avec l'échelle de temps sur l'axe Y en heures et minutes

Question

I ', en utilisant chartjs et maintenant j'ai besoin de rendre une durée.

J'ai besoin d'avoir une catégorie sur l'axe X et la durée sur l'axe Y.

est-il un moyen de convertir une durée sur l'axe X d'avoir:

40 -> 40 minutes

150 -> 02h30 (ou d'un autre mis en forme, mais avec une valeur sur la hache y convertie sur la base 60 pour la conversion des minutes en heures, NON eN DECIMAL!)

j'ai essayé avec

scales: { 

     yAxes: [{ 
       type: 'time', 
      time: { 
       unit: 'minute', 
       displayFormats: { 
        hour: 'h:mm:ss a' 
       } 
      } 
     }] 

     // 
    } 

witouth succès.

c'est mon code complet

var canvas = document.getElementById("graficotest1"); 
var ctx = canvas.getContext("2d"); 
var myChart = new Chart(ctx, { 
type: 'bar', 
data: { 

    labels: [ 
      'modo 1', 
      'modo 2, 
      'modo 13' 
     ], 
    datasets: [ 

     { 
      label: '# Durata reale', 
      data: [ 
       3100, 
       615, 
       705 
      ], 
      backgroundColor: 'rgba(255, 99, 132, 0.2)', 
      borderColor: 'rgba(255,99,132,1)', 
      borderWidth: 1, 
      hoverBackgroundColor: 'red' 
     }, 
     { 
      label: '# Ore in', 
      data: [ 
       0, 
       0, 
       465 
      ], 
      backgroundColor: '#DEF797', 
      borderColor: 'rgba(255,99,132,1)', 
      borderWidth: 1, 
      hoverBackgroundColor: 'yellow' 
     }, 

    ] 
}, 
options: { 
    scales: { 

     // 
     yAxes: [{ 
       type: 'time', 
      time: { 
       unit: 'minute', 
       displayFormats: { 
        hour: 'h:mm:ss a' 
       } 
      } 
     }] 

     // 
    }, 
    // 
    title: { 
     display: false, 
     text: 'stat 1' 
    }, 
    //scaleShowGridLines: false 




} 
}); 

i besoin de convertir tous les valures comme 3100, 615, 705 (minutes) à quelques heures: minutes dans le graphique

Merci

Answer 1

Je suis arrivé Internet et il ya un simple hack pour ce faire, pourquoi j'utilise le hack parce que si je place l'axe des Y à ce jour, le graphique n'est pas rendu et renvoie une erreur.

Veuillez trouver ci-dessous la configuration utilisée pour obtenir la date de l'axe Y.

var options = { 
    scaleOverride: true, 
    scaleSteps: 8, 
    scaleStepWidth: 1800, 
    scaleStartValue: 0, 
    responsive: true, 
    maintainAspectRatio: false, 
    scaleLabel: function(valuePayload) { 
     console.log(new Date(valuePayload.value * 1000).toISOString()); 
     return new Date(valuePayload.value * 1000).toISOString().substr(12, 7); 
    }, 
    multiTooltipTemplate: function(valuePayload) { 
     return valuePayload.datasetLabel + " " + new Date(valuePayload.value * 1000).toISOString().substr(12, 7) 
    }, 
    title: { 
     display: false, 
     text: 'stat 1' 
    } 
    }; 
    var ctx = document.getElementById("canvas").getContext("2d"); 
    window.myLine = new Chart(ctx).Line(data, options); 

Le numéro ci-dessous sur Github contient une méthode astucieuse pour réaliser l'axe des temps sur l'axe Y.

GitHub Problème:here

Le violon ci-dessous contient le code modifié, où la date axe Y est visible,

jsFiddle:here