Javascript 更改chartType onclick ChartJS

因此，我用ChartJS制作了一个图表，但我想通过单击按钮将chartType从“line”更改为“bar”

我试过这样的方法：

let chartType = 'line';
function click() {
  chartType = 'bar';
}

在下面，我只粘贴以下内容：

type: chartType,
data: donationChartBuilder,
etc

但这不是在我点击按钮时更新我的图表吗
我已正确设置按钮：

... onclick="click()" ...

---

您可以添加一个全局变量来实例化图表对象，并使用javascript处理它，这里有一个示例，其中有3个按钮，每种类型一个

行
酒吧
馅饼
var图；
变量类型=['line'、'bar'、'pie']；
无功电流_类型=0；
画首字母（）；
功能开关_类型（）{
如果（current_type++==types.length-1）current_type=0；
开关（电流型）{
案例0：绘制线（）；断开；
案例1：拉杆（）；断裂；
案例2：画饼；折断；
}
}
函数draw_pie（）{
if（chart）chart.destroy（）；//检查图表对象是否存在，如果存在，则销毁它。
/*生成随机数据和颜色*/
变量数据颜色=[
“rgb（‘+（数学地板（数学随机（）*150）+75）+’，‘+（数学地板（数学随机（）*200）+25）+’，‘+（数学地板（数学随机（）*200）+25）+’）”，
“rgb（‘+（数学地板（数学随机（）*150）+75）+’，‘+（数学地板（数学随机（）*200）+25）+’，‘+（数学地板（数学随机（）*200）+25）+’）”，
“rgb（‘+（数学地板（数学随机（）*150）+75）+’，‘+（数学地板（数学随机（）*200）+25）+’，‘+（数学地板（数学随机（）*200）+25）+’）”，
“rgb（‘+（数学地板（数学随机（）*150）+75）+’，‘+（数学地板（数学随机（）*200）+25）+’，‘+（数学地板（数学随机（）*200）+25）+’）”，
“rgb（‘+（数学地板（数学随机（）*150）+75）+’，‘+（数学地板（数学随机（）*200）+25）+’，‘+（数学地板（数学随机（）*200）+25）+’）”，
“rgb（‘+（数学地板（数学随机（）*150）+75）+’，‘+（数学地板（数学随机（）*200）+25）+’，‘+（数学地板（数学随机（）*200）+25）+’）”，
“rgb（‘+（数学地板（数学随机（）*150）+75）+’，‘+（数学地板（数学随机（）*200）+25）+’，‘+（数学地板（数学随机（）*200）+25）+’）”，
];
var数据_值=[
Math.floor（Math.random（）*100），
Math.floor（Math.random（）*100），
Math.floor（Math.random（）*100），
Math.floor（Math.random（）*100），
Math.floor（Math.random（）*100），
Math.floor（Math.random（）*100），
Math.floor（Math.random（）*100），
];
/*创建新图表*/
var ctx=document.getElementById（'myChart'）.getContext（'2d'）；
图表=新图表（ctx{
//我们要创建的图表类型
键入“pie”，
//我们的数据集的数据
数据：{
标签：[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”]，
数据集：[{
标签：“我的第一个数据集”，
背景颜色：数据颜色，
边框颜色：数据颜色，
数据：数据值
}]
},
//配置选项在这里
选项：{}
});
}
函数draw_bar（）{
if（chart）chart.destroy（）；//检查图表对象是否存在，如果存在，则销毁它。
/*生成随机数据和颜色*/
var data_colors='rgb（+（Math.floor（Math.random（）*150）+75）+'，'+（Math.floor（Math.random（）*200）+25）+'，'+（Math.floor（Math.random（）*200）+25）+'；
var数据_值=[
Math.floor（Math.random（）*100），
Math.floor（Math.random（）*100），
Math.floor（Math.random（）*100），
Math.floor（Math.random（）*100），
Math.floor（Math.random（）*100），
Math.floor（Math.random（）*100），
Math.floor（Math.random（）*100），
];
/*创建新图表*/
var ctx=document.getElementById（'myChart'）.getContext（'2d'）；
图表=新图表（ctx{
//我们要创建的图表类型
类型：'bar'，
//我们的数据集的数据
数据：{
标签：[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”]，
数据集：[{
标签：“我的第一个数据集”，
背景颜色：数据颜色，
边框颜色：数据颜色，
数据：数据值
}]
},
//配置选项在这里
选项：{}
});
}
函数绘制线（）{
if（chart）chart.destroy（）；//检查图表对象是否存在，如果存在，则销毁它。
/*生成随机数据和颜色*/
var data_colors='rgb（+（Math.floor（Math.random（）*150）+75）+'，'+（Math.floor（Math.random（）*200）+25）+'，'+（Math.floor（Math.random（）*200）+25）+'；
var数据_值=[
Math.floor（Math.random（）*100），
Math.floor（Math.random（）*100），
Math.floor（Math.random（）*100），
Math.floor（Math.random（）*100），
Math.floor（Math.random（）*100），
Math.floor（Math.random（）*100），
Math.floor（Math.random（）*100），
];
/*创建新图表*/
var ctx=document.getElementById（'myChart'）.getContext（'2d'）；
图表=新图表（ctx{
//我们要创建的图表类型
键入：“行”，
//我们的数据集的数据
数据：{
标签：[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”]，
数据集：[{
标签：“我的第一个数据集”，
背景颜色：数据颜色，
边框颜色：数据颜色，
数据：数据值
}]
},
//配置选项在这里
选项：{}
});
}
函数draw_initial（）{
画线（）；
}