我正在尝试使用 foreach 循环为表中的每一行生成折线图。
不幸的是,只生成了第一个图表,我在网上没有找到任何答案。
有办法做到这一点吗?我需要每页生成 50 个折线图,每个折线图都有唯一的值。
CSHTML
<table class="table">
<thead>
<tr>
<th>Chart</th>
</tr>
</thead>
<tbody>
<tr>
@foreach(var hash in model)
{
<td>
<div height="50" width="80">
<canvas id="tableChart" data-hash="@hash.Count" height="50" width="80"></canvas>
</div>
</td>
}
</tr>
</tbody>
</table>
<script>
var hashCount = $(this).attr('data-hash');
var ctx = document.getElementById('tableChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["A","B","C","D"],
datasets: [
{
data: [1,2,3, hashCount],
backgroundColor: ["red", "gray","blue","green"],
borderColor: "rgb(27,163,198)",
fill: false,
lineTension: 0.3,
radius: 1,
borderWidth: 1,
},
],
},
options: {
legend: {
display: false,
labels: {
fontSize: 12,
},
},
tooltips: {
enabled: false,
intersect: false,
},
display: true,
responsive: true,
maintainAspectRatio: false,
},
});
</script>
最佳答案
您在此处复制了 ID。代码声明
<tbody>
<tr>
@foreach(var hash in model)
{
<td>
<div height="50" width="80">
<canvas id="tableChart" data-hash="@hash.Count" height="50" width="80"></canvas>
</div>
</td>
}
</tr>
</tbody>
实际上创建具有相同 id 的多个 Canvas 元素,这是一种反模式。
此外,当您执行时:
var ctx = document.getElementById('tableChart').getContext('2d');
它只返回一个元素。
更好的方法是向每个 Canvas 元素添加动态类并再次创建循环图表。
类似于以下内容:
<table class="table">
<thead>
<tr>
<th>Chart</th>
</tr>
</thead>
<tbody>
<tr>
@foreach(var hash in model)
{
<td>
<div height="50" width="80">
<canvas class="tableChart@hash" data-hash="@hash.Count" height="50" width="80"></canvas>
</div>
</td>
}
</tr>
</tbody>
然后您可以使用 getElementsByClassName 获取所有元素并在其中绘制图表。
如果有任何错误的语法,请原谅。
关于javascript - Chart.js 使用 foreach mvc 生成图表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59067701/