Javascript 画布JS图表呈现问题
我正在CanvasJS中实现范围条形图。X轴是日间隔，y轴是时间小时。我希望y值的时间范围在小时之间。下面是我的代码，问题是我的图表无法呈现 加载需要很长时间，没有加载就会崩溃。只有在y值范围使用新的日期值时，才会发生这种情况。这里有人知道为什么不装货吗？如何使y轴小时间隔的范围条形图有效 任何帮助都将不胜感激。以下是我在JSFIDLE中的代码：Javascript 画布JS图表呈现问题,javascript,jquery,html,charts,canvasjs,Javascript,Jquery,Html,Charts,Canvasjs,我正在CanvasJS中实现范围条形图。X轴是日间隔，y轴是时间小时。我希望y值的时间范围在小时之间。下面是我的代码，问题是我的图表无法呈现 加载需要很长时间，没有加载就会崩溃。只有在y值范围使用新的日期值时，才会发生这种情况。这里有人知道为什么不装货吗？如何使y轴小时间隔的范围条形图有效 任何帮助都将不胜感激。以下是我在JSFIDLE中的代码： window.onload=函数（）{ var最小值=新日期（2017,08,21,0,20）； var最大值=新日期（2017,08,21,24
window.onload=函数（）{
var最小值=新日期（2017,08,21,0,20）；
var最大值=新日期（2017,08,21,24,20）；
调试器；
var from=新日期（2017年8月21日，0日，20日）；
var to=新日期（2017年8月21日、5日、20日）；
var chart=new CanvasJS.chart（“chartContainer”，
{
exportEnabled:true，
axisY：{
网格厚度：0，
间隔时间：1，
//线宽：0，
标题：“，
//长度：0，
//保证金：0，
valueFormatString:“”，
//长度：0，
保证金：0，
间隔时间：1，
间隔类型：“小时”，
valueFormatString:“hh:mm tt”，
labelAngle:0，
labelFontSize:10，
最小值：最小值，
最大值：最大值
},
axisX2：{
indexLabelFontSize:1，
labelFontSize:14，
labelFontWeight：“粗体”，
labelAngle:0，
},
数据：[
{axisXType:“次要”，
indexLabelFontSize:12，
索引标签：{y[#index]}，
键入：“rangeColumn”，
是的，
数据点：[/Y:[低，高]
{x:1，标签：“Mon”，y:[从，到]}，
{x:2，标签：“星期二”，y:[从，到]}，
{x:3，标签：“Wed”，y:[从，到]}，
{x:4，标签：“星期四”，y:[从，到]}，
{x:5，标签：“Fri”，y:[从，到]}，
{x:6，标签：“Sat”，y:[从，到]}，
{x:7，标签：“太阳”，y:[从，到]}
]
}
]
});
chart.render（）；
}
var chart=new CanvasJS.chart（“chartContainer”，
{
标题：{
文本：“某一事件在给定日期发生的时间”
},
axisY：{
最小值：（新日期（2016,0,28,11,30））.getTime（），
间隔：（1*60*60*1000），
labelFormatter:函数（e）{
返回CanvasJS.formatDate（e.value，“DD-h:mm TT”）；
}
},
工具提示：{
contentFormatter:函数（e）{
返回“”+e.entries[0].dataPoint.label+”开始：“+CanvasJS.formatDate（e.entries[0].dataPoint.y[0]，“DD-h:mm TT”）+”结束：“+CanvasJS.formatDate（e.entries[0].dataPoint.y[1]，“DD-h:mm TT”）；
}},
数据：[
{
键入：“rangeColumn”，
数据点：[
{label:“Walking”，y:[（新日期（2016,0,28,12,20））.getTime（），（新日期（2016,0,28,13,00））.getTime（），
{label:“Running”，y:[（新日期（2016,0,28,13,20））.getTime（），（新日期（2016,0,28,14,20））.getTime（），
{label:“Walking”，y:[（新日期（2016,0,28,14,20））.getTime（），（新日期（2016,0,28,15,00））.getTime（）]
]
}
]
});
chart.render（）
Syed
截至目前，CanvasJS中不提供y轴的日期-时间支持。但作为一种变通方法，使用y轴上的日期时间
var chart=new CanvasJS.chart（“chartContainer”，
{
标题：{
文本：“某一事件在给定日期发生的时间”
},
axisY：{
最小值：（新日期（2016,0,28,11,30））.getTime（），
间隔：（1*60*60*1000），
labelFormatter:函数（e）{
返回CanvasJS.formatDate（e.value，“DD-h:mm TT”）；
}
},
工具提示：{
contentFormatter:函数（e）{
返回“”+e.entries[0].dataPoint.label+”开始：“+CanvasJS.formatDate（e.entries[0].dataPoint.y[0]，“DD-h:mm TT”）+”结束：“+CanvasJS.formatDate（e.entries[0].dataPoint.y[1]，“DD-h:mm TT”）；
}},
数据：[
{
键入：“rangeColumn”，
数据点：[
{label:“Walking”，y:[（新日期（2016,0,28,12,20））.getTime（），（新日期（2016,0,28,13,00））.getTime（），
{label:“Running”，y:[（新日期（2016,0,28,13,20））.getTime（），（新日期（2016,0,28,14,20））.getTime（），
{label:“Walking”，y:[（新日期（2016,0,28,14,20））.getTime（），（新日期（2016,0,28,15,00））.getTime（）]
]
}
]
});
chart.render（）
<!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>