javascript - Chart.js 使用 foreach mvc 生成图表

Question

我正在尝试使用 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>

Answer 1

您在此处复制了 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 获取所有元素并在其中绘制图表。

如果有任何错误的语法，请原谅。