キャンバスJSチャートのレンダリングの問題

Canvas JSで範囲バーグラフを実装しています。 X軸は曜日間隔、Y軸は時間帯です。私は数時間の間にy値の範囲を持っていたい。ここに私のコードは、問題は私のグラフはレンダリングされません。キャンバスJSチャートのレンダリングの問題

ロードせずにクラッシュすることは永久にかかります。これは、y値の範囲に新しい日付値を使用する場合にのみ発生します。ここに誰かがなぜ読み込まれていないのか知っていますか？ y軸の時間間隔が有効な範囲棒グラフを作成するにはどうすればよいですか？

ご協力いただければ幸いです。ここに私のコードは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>

出典

2017-08-30 Syed Rahman

サイード、

y軸の日時サポートは、今のように、CanvasJSでは使用できません。しかし、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>

出典

2017-09-01 05:22:04

キャンバスJSチャートのレンダリングの問題

答えて

関連する問題