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

kokeuurv  于 2022-11-06  发布在  Chart.js
关注(0)|答案(1)|浏览(151)

第一个
你好,我正在尝试为下面的chart.js图表创建一个下拉选项。例如,当我单击饼图时,我想隐藏其余的图表,只显示饼图。我看过这里发布的示例,但它们都使用同一张画布,上面有相同的数据(值)。我想使用4种不同类型的画布,包含不同的数据。我不知道我应该从哪里开始。谢谢阅读。

jpfvwuh4

jpfvwuh41#

<select>元素有一个options数组和一个名为selectedIndex的属性。因此,要获取所选选项:

let select = document.querySelector('#chartType');
// concat Chart for the canvas ID
let chart = select.options[select.selectedIndex].value + 'Chart';

EDIT-------------------------------------------------------------^,在此处添加.value

然后抓取所有画布并隐藏除选定画布以外的所有画布:

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

第一个

相关问题