有没有更好的方法在 ChartJS 和 ASP.NET C# 中创建“n”个图表？

Question

编辑：我把它缩小到这样的事情：

for (i = 0; i < data.length; i++) {
          const newCanvas = document.createElement("canvas");
          newCanvas.id = data[i].design_name;
          const currentDiv = document.getElementById("chartSpace");
          var parentDiv = document.getElementById("gridHere");
           parentDiv.insertBefore(newCanvas, currentDiv);
           createChart([data[i].design_name], [data[i].design_start, data[i].design_end]);
            }

随着创建图表使图表 id = 到数组“标签”：

 const myChart = new Chart(
            document.getElementById(labels),
            config
        );

我正在尝试创建一个在 ChartJS 中创建“n”个图表并将每个图表保存为图像的工具。 目前，designButtonClick() 将“event_fky”值发送到我的 controller 中的 getDesigns(event_fky)。 此方法返回具有该外键的所有设计。 反过来，图表会在图表上绘制每个设计。 我需要将其演变成可以根据有多少设计为每个设计制作一组单独的图表的东西。 我目前的解决方案仍然是概念性的，是在我的 controller 中创建图表变量“chartData [data here]”和“labels[datahere]”，同时遍历从 getDesigns 返回的设计，并将它们发送回 JS 脚本 createChart '每个设计的 n' 次。 它还将基于 design_name 属性发送 html 图表/html 元素 ID 以发送回 createChart。 这样，它会创建一个独特的图表'n'次。

要将图表保存为图像，我将使用 getDesigns 生成的同一组元素 ID，使用 JS 的 toBase64Image() function 将图表发送到图像并将它们保存到用户的系统。

这是解决这个问题的最好方法吗？ 或者这是意大利面，还有更好的方法吗？ 我试图找到更好的在线答案的尝试只导致了动态更新一个图表的文档，而不是创建动态数量的图表。 非常感谢您的帮助，代码如下以及当前图表 output 的屏幕截图。

JavaScript：

   var labels = [];
   var cData = [];

   function designButtonClick() {
       var event_fky = 3;

       $.ajax({
           url: 'Tree/getDesigns',
           type: 'POST',
           data: { event_fky }
       }).done(function (data) {
           for (i = 0; i < data.length; i++) {
               labels.push(data[i].design_name);
               cData.push([data[i].design_start, data[i].design_end])
           }
         
           createChart(labels, cData);

       });
       
   }

   function createChart(labels, cData) {
       const data = {
           labels: labels,
           datasets: [{
               barThickness: 2,
               categoryPercentage: .5,
               label: 'Design Time',
               data: cData,
               backgroundColor: [
                   'rgba(255, 26, 104, 0.2)'
               ],
               borderColor: [
                   'rgba(255, 26, 104, 1)'
               ],
               borderWidth: 1,
               borderSkipped: false,
               borderRadius: 20
           }]
       };
       const config = {
           type: 'bar',
           data,
           options: {
               indexAxis: 'y',
               scales: {
                   y: {
                       beginAtZero: true
                   },
                   x: {
                       min: 0,
                       max: 6000,
                       ticks: {
                           stepSize: 1000
                       }
                   }
               }
           }
       };
       const myChart = new Chart(
           document.getElementById('myChart'),
           config
       );
   }

C# Controller：

public ActionResult getDesigns(int? event_fky)
        {

            var designs = from e in _context.designs
                         where (event_fky.HasValue ? e.event_fky == event_fky : e.event_fky == null)
                         select new
                         {
                             design_pky = e.design_pky,
                             design_name = e.design_name,
                             design_start = e.design_start,
                             design_end = e.design_end
                         };
            return this.Json(designs, JsonRequestBehavior.AllowGet);
        }

设计表：

--------Design--------
design_pky    |int
event_fky     |int
design_name   |varchar
design_start  |number
design_end    |number

图表截图

Answer 1

这是 javascript 的有效答案：

        var eventList = function () {
            var tmp = null;
            $.ajax({
                'async': false,
                url: 'Tree/getEventIDs',
                type: 'POST',
                data: {},
                'success': function (data) {
                    tmp = data;
                }

            });
            return tmp;
        }();
        for (var i = 0; i < eventList.length; i++) {

            event_fky = eventList[i].event_pky;
            event_name = eventList[i].event_name;
            event_length = eventList[i].event_end;


            var designList = function () {
                var tmpi = null;
                $.ajax({
                    'async': false,
                    url: 'Tree/getDesigns',
                    type: 'POST',
                    data: {event_fky},
                    'success': function (data1) {
                        tmpi = data1;
                    }

                });
                console.log(event_fky);
                console.log(tmpi);
                return tmpi;
            }();
            var dLabels = [];
            var dLengths = [];
            for (var j = 0; j < designList.length; j++) {
                dLabels.push(designList[j].design_name);
                dLengths.push([designList[j].design_start, designList[j].design_end]);
            }

            const newCanvas = document.createElement("canvas");

            newCanvas.id = event_name;

            const currentDiv = document.getElementById("chartSpace");
            var parentDiv = document.getElementById("gridHere");

            parentDiv.insertBefore(newCanvas, currentDiv);
            if (dLabels.length != 0) {
                createChart(dLabels, dLengths, event_name, event_length);
            }
        }
       
    }


  function createChart(labels, cData, evName, evLen) {
        // setup
        const data = {
            labels: labels,
            datasets: [{
                barThickness: 4,
                categoryPercentage: .5,
                label: evName,
                data: cData,
                backgroundColor: [
                    'rgba(' + Math.random() * 85 + ', ' + Math.random() * 170 + ', ' + Math.random() * 255 + ', 1)'
                ],
                borderColor: [
                    'rgba(255, 26, 104, 1)'
                ],
                borderWidth: 0,
                borderSkipped: false,
                borderRadius: 20
            }]
        };

        // config
        const config = {
            type: 'bar',
            data,
            options: {
                indexAxis: 'y',
                scales: {
                    y: {
                        beginAtZero: true
                    },
                    x: {
                        min: 0,
                        max: evLen,
                        ticks: {
                            stepSize: 100

                        }
                    }
                }
            }
        };

        // render init block
        const myChart = new Chart(
            document.getElementById(evName),
            config
        );

        return myChart;
    }