Javascript 使用选择标记和多画布创建Chart.js下拉选项

var ctx=document.getElementById（“线形图”）；
var线形图=新图表（ctx{
类型：'行'，
数据：{
标签：[“2000”、“2005”、“2010”、“2015”、“2018”]，
数据集：[{
标签：“温哥华人口数据”，
数据：[1950002093000227800024850002597000]，
边框颜色：[
'rgba（255,99132,1）'
],
背景颜色：['rgba（255200200,0.3）'，
边框宽度：1，
//borderDash:（[3]），
pointBackgroundColor:“红色”，
pointBorderColor:“rgba（250,10,10,0.1）”，
点边界宽度：“10”，
pointStyle:“矩形四舍五入”，
pointHoverBackgroundColor:“rgba（255,0,0,0.5）”，
pointHoverBorderColor:“rgba（255255100,0.7）”，
点悬停半径：“10”，
//展示线：错，
//阶梯线：“假”
}]
},
选项：{
标题：{
显示：对，
正文：“温哥华人口”，
尺寸：20，
fontColor:“rgba（20,20,20,1）”
},
图例：{
显示：假，
位置：'右'，
标签：{
fontColor:“#000”
},
},
要素：{
行：{
张力：0，//禁用贝塞尔曲线
}
},
比例：{
雅克斯：[{
滴答声：{
贝吉纳泽罗：是的，
回调：函数（值、索引、值）{
返回值+“人”
}
}   
}]
},
/*动画：{
持续时间：0，//一般动画时间
},*/
悬停：{
animationDuration:0，//悬停项目时的动画持续时间
},
responsiveAnimationDuration:0，//调整大小后的动画持续时间
}
});
//沉淀
var ctx=document.getElementById（“条形图”）；
var条形图=新图表（ctx{
类型：'bar'，
数据：{
标签：[“2017年5月”、“2017年6月”、“2017年7月”、“2017年8月”、“2017年9月”、“2017年10月”、“2017年11月”、“2017年12月”、“2018年1月”、“2018年2月”、“2018年3月”、“2018年4月”、“2018年5月”]，
数据集：[{
标签：“降水数据”，
数据：[102.2,46.4,1.8,5.0,29.4114.8197.0170.6249.4105.8111.8134.8,1.4]，
背景颜色：[
"rgba(255,99132,0.5)",，
“rgba（155130,32,0.5）”，
"rgba(105,9132,0.5)",，
“rgba（15130202,0.5）”，
“rgba（15250252,0.5）”，
“rgba（205100,32,0.5）”，
"rgba(0205,0,0.5)",，
"rgba(55,15,52,0.5)",，
“rgba（255,0,0,0.5）”，
"rgba(25,59,52,0.5)",，
"rgba(0100,55,0.5)",，
“rgba（200111199,0.5）”，
],
边框颜色：[
"rgba(255,99132,1)",，
“rgba（155130,32,1）”，
"rgba(105,9132,1)",，
“rgba（15130202,1）”，
“rgba（15250252,1）”，
“rgba（205100,32,0.5）”，
"rgba(0205,0,1)",，
"rgba(55,15,52,1)",，
"rgba(255,0,0,1)",，
"rgba(25,59,52,1)",，
"rgba(0100,55,1)",，
"rgba(200111199,1)",，
],
边框宽度：“1”，
pointHoverBackgroundColor:#fff“，
hoverBorderColor:#fff“，
}]
},
选项：{
标题：{
显示：对，
正文：“温哥华降水”，
尺寸：20，
fontColor:“rgba（10,0,20,0.9）”
},
图例：{
显示：假，
位置：'右'，
标签：{
fontColor:“#000”
}
},
比例：{
雅克斯：[{
滴答声：{
贝吉纳泽罗：是的，
回调：函数（值、索引、值）{
返回值+“mm”
}
}
}]
}
},
});
//种族
var ctx=document.getElementById（“pieChart”）；
var PieChart=新图表（ctx{
类型：'pie'，
数据：{
标签：[“欧洲坎大迪亚人”、“中国人”、“南亚人”、“菲律宾人”、“东南亚人”、“日本人”、“拉丁美洲人”、“混合可视少数民族”、“朝鲜人”、“土著人”、“西亚人”、“黑人”、“阿拉伯人”]，
数据集：[{
标签：“种族”，
数据：[46.2,27.7,6,6,3,1.7,1.6,1.5,1.5,2,1.2,1,0.5]，
背景颜色：[
"rgba(255,99132,0.5)",，
“rgba（155130,32,0.5）”，
"rgba(105,9132,0.5)",，
“rgba（15130202,0.5）”，
“rgba（15250252,0.5）”，
“rgba（205100,32,0.5）”，
"rgba(0205,0,0.5)",，
"rgba(55,15,52,0.5)",，
“rgba（255,0,0,0.5）”，
"rgba(25,59,52,0.5)",，
"rgba(0100,55,0.5)",，
“rgba（200231,50,0.5）”，
“rgba（155,22,30,0.5）”，
], 
边框颜色：[
"rgba(255,99132,0.5)",，
“rgba（155130,32,0.5）”，
"rgba(105,9132,0.5)",，
“rgba（15130202,0.5）”，
“rgba（15250252,0.5）”，
“rgba（205100,32,0.5）”，
"rgba(0205,0,0.5)",，
"rgba(55,15,52,0.5)",，
“rgba（255,0,0,0.5）”，
"rgba(25,59,52,0.5)",，
"rgba(0100,55,0.5)",，
“rgba（200231,50,0.5）”，
“rgba（155,22,30,0.5）”，
],
边框宽度：[1]
}],
门诊百分比：[
let select = document.querySelector('#chartType');
// concat Chart for the canvas ID
let chart = select.options[select.selectedIndex].value + 'Chart'; 

document.querySelectorAll('canvas')
.forEach(c => {c.style.display = (c.id === chart)? 'inherit' : 'none';})