我正在Canvas JS中实现范围条形图。 X轴是日间隔,y轴是时间小时。我希望在几小时之间得到y值范围。这是我下面的代码,问题是我的图表没有渲染。
无需加载即可永久加载和崩溃。只有在我的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>
答案 0 :(得分:3)
赛,
截至目前,CanvasJS中没有y轴日期时间支持。但作为在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();
&#13;
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 200px; width: 100%;"></div>
&#13;