Javascript 单击按钮时图表不呈现w/Chart.js

我有一个web应用程序，它向用户提供一个表单，用于绘制带有chart.js的图表

我在单击按钮时收集表单数据，正确设置格式，然后想要呈现图表

代码如下：

///public/main.js
常量图表数据={
标签：[“红色”、“蓝色”、“黄色”、“绿色”、“紫色”、“橙色”]，
数据集：[{
标签：“#投票数”，
数据：[12,19,3,16,2,3]，
背景颜色：[
"rgba(255,99,132,0.2)",，
“rgba（54162235,0.2）”，
"rgba(255,206,86,0.2)",，
“rgba（751921920.2）”，
“rgba（153102255,0.2）”，
‘rgba（255、159、64、0.2）’
]
}]
};
常数气压={
比例：{
雅克斯：[{
滴答声：{
贝吉纳泽罗：是的
}
}]
}
};
const ctx=document.getElementById（“myChart”）.getContext（“2d”）；
常量myChart=新图表（ctx{
类型：'bar'，
数据：图表数据，
选项：气压选项
});
//从表单中获取图表信息
$（文档）.ready（函数（）{
$（“#render_btn”）。在（“单击”上，函数（e）{
e、 预防默认值（）；
//首先从页面上抓取表单数据
const formData=$（“form”）.serializeArray（）；
//获取与表单数据分离的图表类型
const chartType=document.getElementById（'chart_type'）。值；
//创建图表构造函数要使用的数据对象
常量图表数据={
数据集：[]
};
让datasetsItem={}；
//将formData数组转换为chartData对象
forEach（函数（值、索引）{
if（formData[index].name=='labels'）{
chartData[（formData[index].name）]=formData[index].value；
}否则{
datasetsItem[formData[index].name]=formData[index].value；
chartData.datasets[0]=datasetsItem；
}
});
//现在我们必须进行一些转换，即chartData。标签必须是
//从字符串等转换为数组
chartData.datasets[0].backgroundColor=splitString（chartData.datasets[0].backgroundColor）；
chartData.datasets[0].data=strToNumberArray（chartData.datasets[0].data）；
chartData.labels=splitString（chartData.labels）；
//检查是否成功
试一试{
如果（！（chartData.datasets[0].背景色）| |！（chartData.datasets[0].数据）| |！（chartData.labels））{
抛出新错误（“输入错误。重新检查表单数据”）；
}
myChart.update({
类型：图表类型，
数据：图表数据
});
}捕获（错误）{
警报（错误）；
}
// ============================================================= //
//======================================================================================================================================================//
// ============================================================= //
函数splitString（strToSplit，分隔符='，'）{
if（strToSplit==未定义）{
log（“错误：splitString为空。”）；
返回“”；
}
//测试字符串中是否有逗号
常量结果=/，+/.测试（strToSplit）；
如果（！结果）{
警报（${strotsplit}`中缺少逗号分隔符）；
返回false；
}
//将字符串拆分为数组并修剪任何空格
让arrayOfStrings=strToSplit.split（分隔符）；
forEach（函数（值、索引）{
ArrayOfString[index]=value.trim（）；
});
返回数组字符串；
}
//函数将字符串转换为数组，然后将每个元素转换为数字
函数strToNumberArray（str，分隔符='，'）{
如果（str==未定义）{
警报（'错误：字符串为空'）；
返回“”；
}
//测试字符串中是否有逗号
常量结果=/，+/.测试（str）；
如果（！结果）{
警报（${str}`中缺少逗号分隔符）；
返回false；
}
让arrayOfNumbers=str.split（分隔符）.map（编号）；
返回arrayOfNumber；
}
// ============================================================== //
//======================================================================//
// ============================================================== //
})//。单击“单击”
});

输入您的值：
图表类型
图表标签
图表标签
图表数据
图表颜色
渲染图
更新功能的文档如下所示：

触发图表的更新在更新数据对象后，可以安全地调用该属性。这将更新所有比例、图例，然后重新渲染图表

因此，您必须更新数据对象，而不是在
update
方法中传递更新的数据对象。该方法仅接受以下属性：


持续时间
懒惰的
缓和

在您的示例中，您必须更改以下代码：

myChart.update({
   type: chartType,
   data: chartData
});

到

以下是更改后的代码片段：


///public/main.js
常量图表数据={
标签：[“红色”、“蓝色”、“黄色”、“绿色”、“紫色”、“橙色”]，
数据集：[{
标签：“#投票数”，
数据：[12,19,3,16,2,3]，
背景颜色：[
"rgba(255,99,132,0.2)",，
“rgba（54162235,0.2）”，
"rgba(255,206,86,0.2)",，
“rgba（751921920.2）”，
“rgba（153102255,0.2）”，
‘rgba（255、159、64、0.2）’
]
}]
};
常数气压={
比例：{
雅克斯：[{
滴答声：{
贝吉纳泽罗：是的
}
}]
}
};
const ctx=document.getElementById（“myChart”）.getContext（“2d”）；
常量myChart=新图表（ctx{
类型：'bar'，
数据：图表数据，
选项：气压选项
});
//从表单中获取图表信息
$（文档）.ready（函数（）{
$（“#render_btn”）。在（“单击”上，函数（e）{
e、 预防默认值（）；
//首先从页面上抓取表单数据
const formData=$（“form”）.serializeArray（）；
//获取与表单数据分离的图表类型
恒沙特
myChart.type = chartType;
myChart.data = chartData;
myChart.update();