Problèmes de rendu de graphique JS Canvas

Je suis en train d'implémenter un graphique à barres dans Canvas JS. Les axes X sont des intervalles de jour et les axes y sont des heures. Je veux avoir la plage de valeur y entre les heures dans le temps. Voici mon code ci-dessous, Le problème est que mon tableau ne rend pas.Problèmes de rendu de graphique JS Canvas

Il faut une éternité pour charger et se bloque sans chargement. Cela se produit uniquement si j'utilise une nouvelle valeur de date pour ma plage de valeurs y. Est-ce que quelqu'un sait ici pourquoi son chargement n'est pas? Comment puis-je avoir le graphique à barres de la plage avec l'intervalle des heures de l'axe Y qui fonctionne?

Toute aide serait grandement appréciée. Voici mon code dans jsFiddle: https://jsfiddle.net/syedrh/3kpn5hk1/

<!DOCTYPE HTML> 
<html> 

<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link href="assets/css/topnav.css" rel="stylesheet"> 
<script type="text/javascript"> 
window.onload = function() { 

var minimum = new Date(2017,08,21,0,20); 
var maximum = new Date(2017,08,21,24,20); 

debugger; 
var from = new Date(2017,08,21,0,20); 
var to = new Date(2017,08,21,5,20); 

var chart = new CanvasJS.Chart("chartContainer", 
{ 
    exportEnabled: true, 
    axisY: { 
     gridThickness: 0, 
     interval:1, 
     //lineThickness:0, 
     title: "", 
     //tickLength: 0, 
     //margin:0, 
     valueFormatString:" ", 
     //tickLength:0, 
     margin:0, 
     interval: 1, 
     intervalType: "hour", 
     valueFormatString: "hh:mm tt", 
     labelAngle: 0, 
     labelFontSize:10, 
     minimum: minimum, 
     maximum: maximum 
    },  
    axisX2: { 
     indexLabelFontSize: 1, 
     labelFontSize:14, 
     labelFontWeight:"bold", 
     labelAngle:0, 
    }, 
    data: [ 
    { axisXType: "secondary", 
     indexLabelFontSize: 12, 
     indexLabel: "{y[#index]}", 
     type: "rangeColumn", 
     bevelEnabled: true, 
     dataPoints: [ // Y: [Low, High] 
      {x: 1, label:"Mon", y: [from,to]}, 
      {x: 2, label:"Tues", y:[from,to]}, 
      {x: 3, label:"Wed", y:[from,to]}, 
      {x: 4, label:"Thurs", y:[from,to]}, 
      {x: 5, label:"Fri", y:[from,to]}, 
      {x: 6, label:"Sat", y:[from,to]}, 
      {x: 7, label:"Sun", y:[from,to]} 
     ] 
    } 
    ] 
}); 
chart.render(); 
} 
</script> 
<script type="text/javascript" 
src="https://canvasjs.com/assets/script/canvasjs.min.js"></script> 
</head> 
    <body> 
    <div id="chartContainer" style="height: 500px; width: 400px;overflow-x: 
    scroll;margin-top:4px;"></div> 
    </body>

Source

2017-08-30 Syed Rahman

Syed,

soutien Date de temps pour l'axe y est pas disponible dans CanvasJS, à partir de maintenant. Mais comme une solution pour utiliser la date et l'heure sur l'axe des y.

var chart = new CanvasJS.Chart("chartContainer", 
 
           { 
 
    title: { 
 
    text: "How long an event occurred for on a given day" 
 
    }, 
 
    axisY: { 
 
    minimum: (new Date(2016, 0, 28, 11, 30)).getTime(),    
 
    interval: (1 * 60 * 60 * 1000), 
 
    labelFormatter: function(e){ 
 
     return CanvasJS.formatDate(e.value, "DD - h:mm TT"); 
 
    } 
 
    }, 
 

 
    toolTip:{ 
 
    contentFormatter: function (e) { 
 
     return "<strong>" + e.entries[0].dataPoint.label + "</strong></br> Start: " + CanvasJS.formatDate(e.entries[0].dataPoint.y[0], "DD - h:mm TT") + "</br>End : " + CanvasJS.formatDate(e.entries[0].dataPoint.y[1], "DD - h:mm TT"); 
 
    }}, 
 

 
    data: [ 
 
    { 
 
     type: "rangeColumn", 
 
     dataPoints: [ 
 
     { label: "Walking", y: [(new Date(2016, 0, 28, 12, 20)).getTime(), (new Date(2016, 0, 28, 13, 00)).getTime()] }, 
 
     { label: "Running", y: [(new Date(2016, 0, 28, 13, 20)).getTime(), (new Date(2016, 0, 28, 14, 20)).getTime()] }, 
 
     { label: "Walking", y: [(new Date(2016, 0, 28, 14, 20)).getTime(), (new Date(2016, 0, 28, 15, 00)).getTime()] } 
 
     ] 
 
    } 
 
    ]      
 
}); 
 
chart.render();

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script> 
 
<div id="chartContainer" style="height: 200px; width: 100%;"></div>

Source

2017-09-01 05:22:04

Problèmes de rendu de graphique JS Canvas

Répondre

Questions connexes