Html 如何使用按钮在条形图和折线图之间切换

我有一些代码可以为我生成一个条形图并显示数据。我现在要添加的是一个按钮，它可以让用户在所显示数据的条形图和折线图之间切换。如果能为我提供帮助，我将不胜感激

这是我已经得到的代码

var barVals=[]；
函数绘图（）{
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
//计算最大条形值（用于缩放其余部分）
var最高=0；
对于（var b=0；b最高）
最高=巴瓦耳[b]；
}
//我们有8条水平线，所以计算一个合适的比例
var行间距=1；
var highestLine=7*线间距；
while（最高线<最高线）{
行距*=10；
最高线=7*线间距；
}
//灰色背景
ctx.fillStyle=“rgb（200200）”；
ctx.fillRect（0,0600450）；
//绘制水平线并（如果我们有任何数据可以缩放）标记水平线
var-lineNum=0；
ctx.fillStyle=“白色”；
ctx.font=“16px无衬线”；
对于（y=0；y 0）{
ctx.fillText（行距*lineNum，10400-y+6）；
lineNum++；
}
}
//绘制框（宽度取决于我们有多少个）
var barWidth=500/barVals.length；
var halfBarWidth=barWidth/2；
对于（b=0；b