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');

它仅返回一个元素。

最好将动态类添加到每个画布元素，然后再次创建图表循环。

类似以下内容：

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

如果语法错误，请原谅我。

Answer 2

尝试一下。它将按类名称遍历每个画布元素，并生成图表。

<table class="table">
    <thead>
        <tr>
            <th>Chart</th>         
        </tr>
    </thead>
    <tbody>
        <tr>
            @foreach(var hash in model)
            {
            <td>
                <div height="50" width="80">
                    //note the change of `id` to `class`
                    <canvas class="tableChart" data-hash="@hash.Count" height="50" width="80"></canvas>
                </div>
            </td>
            }
        </tr>
    </tbody>
</table>



 <script>
   $(".tableChart").each(function(i) {
       var hashCount = $(this).attr("data-hash");
       var ctx = $(this).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: {      
           ...
           },
        });
   });
</script>