Javascript 如何为使用HTML画布绘制的动态图表绘制X轴和y轴

我想为使用CANVAS html元素创建的动态图表绘制x轴和y轴。该图表包含一条移动线，表示一组对象，属性x和y表示x和y坐标。这些点的值应在x轴和y轴上绘制。x轴和y轴必须描述移动线上点的x和y坐标。我的代码是：

我目前的代码是：

#挥手{
背景：#AAA；
}
变量数据数组=[{
x:0,，
y:0
}, {
x:1，
y:10
}, {
x:2，
y:13
}, {
x:3，
y:18
}, {
x:4，
y:20
}, {
x:5，
y:17
}, {
x:6，
y:10
}, {
x:7，
y:13
}, {
x:8，
y:18
}, {
x:9，
y:20
}, {
x:10，
y:17
}, {
x:11,，
y:13
}, {
x:12，
y:18
}, {
x:13，
y:20
}, {
x:14，
y:17
}, {
x:15，
y:10
}, {
x:16，
y:13
}, {
x:17，
y:18
}, {
x:18，
y:20
}, {
x:19，
y:100
}];
（功能（）{
var canvas=document.getElementById（“wave”）；
canvas.style.width=“500px”；
canvas.style.height=“100px”；
//高dpi材料
canvas.width=parseInt（canvas.style.width）*2；
canvas.height=parseInt（canvas.style.height）*2；
//获取画布上下文
var ctx=canvas.getContext（“2d”）；
//笔画颜色
ctx.strokeStyle=“#ffffff00”；
//由于dpi比例较高，因此绘制较粗的线
ctx.lineWidth=2；
var dps=[]；
对于（var a=0；a<20；a++）{
dps[a]=数据阵列[a]；
}
clearRect（0，0，canvas.width，canvas.height）；
对于（var b=0；b<19；b++）{
var x1=（canvas.width*b）/19；
var x2=（canvas.width*（b+1））/19；
ctx.beginPath（）；
ctx.moveTo（x1，（1-（dps[b].y/100））*canvas.height）；
ctx.lineTo（x2，（1-（dps[b+1].y/100））*canvas.height）；
ctx.stroke（）；
}
间隔=设置间隔（函数（）{
updateChart（）
}, 1000);
c=0；
函数updateChart（）{
如果（c<50）{
dps.push({
x:c，
y:Math.round（Math.random（）*100）
});
C++；
如果（dps.length>19）{
dps.shift（）；
}
clearRect（0，0，canvas.width，canvas.height）；
对于（var b=0；b<19；b++）{
var x1=（canvas.width*b）/19；
var x2=（canvas.width*（b+1））/19；
ctx.beginPath（）；
ctx.moveTo（x1，（1-（dps[b].y/100））*canvas.height）；
ctx.lineTo（x2，（1-（dps[b+1].y/100））*canvas.height）；
ctx.stroke（）；
}
}
}
})();

x&y轴似乎已经存在于plnkr中。那你还缺什么？看来你已经解决了。哈哈。@Prateek。分享你的答案。