d3.js中折线图的x轴时间和y轴数据不'；t匹配/显示JSON上的内容（数据）

$（文档）.ready（（）=>{
//设置图形的尺寸和边距
var margin={顶部：20，右侧：20，底部：30，左侧：50}，
宽度=960-margin.left-margin.right，
高度=500-margin.top-margin.bottom；
//解析日期/时间
var parseTime=d3.timeParse（“%H:%M:%S”）；
//设定范围
var x=d3.scaleTime（）.range（[0，width]）；
变量y=d3.scaleLinear（）.range（[height，0]）；
//界定界线
var valueline=d3.line（）
.x（函数（d）{return x（d.availability_time）；}）
.y（函数（d）{返回y（d.总小时百分比）；}）；
//将svg对象附加到页面主体
//将“组”元素附加到“svg”
//将“组”元素移动到左上角
var svg=d3.选择（#折线图”）.追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”，
“翻译（“+margin.left+”，“+margin.top+”）；
函数图（数据）{
console.log（数据[0]。可用性\u时间）；
//格式化数据
data.forEach（函数（d）{
d、 可用性时间=（解析时间（d.可用性时间））；
d、 总小时百分比=d.总小时百分比；
});
//排序时间递增
数据排序（函数（a，b）{
返回a[“可用性时间”]-b[“可用性时间”]；
})
//缩放数据的范围
x、 域（d3）。范围（数据，函数（d）{
返回d.U时间；
}));
y、 域（[0，d3.max（数据，函数（d））{
返回Math.max（d.总计上升百分比）；
})]);
//添加valueline路径。
追加（“路径”）
.数据（[数据]）
.attr（“类”、“行”）
.attr（“d”，valueline）；
//添加X轴
svg.append（“g”）
.attr（“变换”、“平移（0）”、“高度+”）
.call（d3.axisBottom（x））；
//添加Y轴
svg.append（“g”）
.调用（d3.左（y））；
}
//获取数据
//var perHourResult=“/perhouravaailabilities/”+默认日期；
//console.log（perHourResult）；
var perHourResult=
[
{“id”：0，“可用时间”：“00:00:00”，“总小时百分比”：99.55}，
{“id”：0，“可用时间”：“01:00:00”，“总小时百分比”：100.0}，
{“id”：0，“可用时间”：“02:00:00”，“总小时百分比”：100.0}，
{“id”：0，“可用时间”：“03:00:00”，“总小时百分比”：100.0}，
{“id”：0，“可用时间”：“04:00:00”，“总小时百分比”：100.0}，
{“id”：0，“可用时间”：“05:00:00”，“总小时百分比”：100.0}，
{“id”：0，“可用时间”：“06:00:00”，“总小时百分比”：100.0}，
{“id”：0，“可用时间”：“07:00:00”，“总小时百分比”：100.0}，
{“id”：0，“可用时间”：“08:00:00”，“总小时百分比”：100.0}，
{“id”：0，“可用时间”：“09:00:00”，“总小时百分比”：100.0}，
{“id”：0，“可用时间”：“10:00:00”，“总小时百分比”：100.0}，
{“id”：0，“可用时间”：“11:00:00”，“总小时百分比”：100.0}，
{“id”：0，“可用时间”：“12:00:00”，“总小时百分比”：100.0}，
{“id”：0，“可用时间”：“13:00:00”，“总小时百分比”：100.0}，
{“id”：0，“可用时间”：“14:00:00”，“总小时百分比”：100.0}，
{“id”：0，“可用时间”：“15:00:00”，“总小时百分比”：99.75}，
{“id”：0，“可用时间”：“16:00:00”，“总小时百分比”：100.0}，
{“id”：0，“可用时间”：“17:00:00”，“总小时百分比”：100.0}，
{“id”：0，“可用时间”：“18:00:00”，“总小时百分比”：100.0}，
{“id”：0，“可用时间”：“19:00:00”，“总小时百分比”：100.0}，
{“id”：0，“可用时间”：“20:00:00”，“总小时百分比”：100.0}，
{“id”：0，“可用时间”：“21:00:00”，“总小时百分比”：100.0}，
{“id”：0，“可用时间”：“22:00:00”，“总小时百分比”：100.0}，
{“id”：0，“可用时间”：“23:00:00”，“总小时百分比”：100.0}
];
console.log（perHourResult[0]。可用性\u时间）；
绘制（每小时结果）；
});

仪表板
@进口”https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
身体{
字体系列：“Poppins”，无衬线；
背景：#fafafa；
}
p{
字体系列：“Poppins”，无衬线；
字体大小：1.1米；
字体大小：300；
线高：1.7em；
颜色：#999；
}
A.
a:悬停，
a:焦点{
颜色：继承；
文字装饰：无；
过渡：均为0.3秒；
}
navbar先生{
填充：15px 10px；
背景：#fff；
边界：无；
边界半径：0；
边缘底部：40px；
盒影：1px1p3pRGBA（0,0,0,0.1）；
}
.导航栏btn{
盒影：无；
大纲：无！重要；
边界：无；
}
/* ---------------------------------------------------
边栏样式
----------------------------------------------------- */
.包装纸{
显示器：flex；
宽度：100%；
对齐项目：拉伸；
}
#边栏{
最小宽度：250px；
最大宽度：250px；
背景：rgb（60,95238）；
颜色：#fff；
过渡：均为0.3秒；
}
#侧边栏{
左边距：-250px；
}
#边栏。边栏标题{
填充：20px；
背景：rgb（90121243）；
}
#边栏