有没有更好的方法在 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 = 到数组 'labels':

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

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

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

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

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# 控制器：

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

设计Table：

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

Screenshot of Chart

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;
    }

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

Is there a better way to create an 'n' number of charts in ChartJS and ASP.NET C#?

javascript

c#

asp.net

charts

chart.js