在表格中每行显示堆栈条形图可以通过以下步骤实现:
以下是一个示例代码片段,使用Chart.js库在表格中每行显示堆栈条形图:
<!DOCTYPE html>
<html>
<head>
<title>Stacked Bar Chart in Table</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<table>
<thead>
<tr>
<th>Category</th>
<th>Data 1</th>
<th>Data 2</th>
<th>Data 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Item 1</td>
<td>10</td>
<td>20</td>
<td>30</td>
</tr>
<tr>
<td>Item 2</td>
<td>15</td>
<td>25</td>
<td>35</td>
</tr>
<tr>
<td>Item 3</td>
<td>5</td>
<td>15</td>
<td>25</td>
</tr>
</tbody>
</table>
<script>
// 获取表格数据
const table = document.querySelector('table');
const rows = table.querySelectorAll('tbody tr');
const categories = Array.from(table.querySelectorAll('thead th')).slice(1).map(th => th.textContent);
// 创建堆栈条形图容器
rows.forEach(row => {
const chartContainer = document.createElement('div');
chartContainer.style.width = '200px';
chartContainer.style.height = '100px';
row.appendChild(chartContainer);
// 获取数据
const data = Array.from(row.querySelectorAll('td')).slice(1).map(td => parseInt(td.textContent));
// 创建堆栈条形图
new Chart(chartContainer, {
type: 'bar',
data: {
labels: categories,
datasets: [{
data: data,
backgroundColor: ['red', 'green', 'blue'],
}]
},
options: {
scales: {
x: {
stacked: true,
},
y: {
stacked: true,
}
}
}
});
});
</script>
</body>
</html>
这个示例使用Chart.js库创建堆栈条形图,并将每个图表插入到表格的每一行中。每行的数据从表格中获取,并根据需要进行样式和配置的自定义。请注意,这只是一个简单的示例,你可以根据实际需求进行更复杂的定制和优化。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云