javascript - Chart JS 数据集的动态数量

Question

在进行了一些搜索之后，我曾几次认为我已经接近解决方案了，可惜还是不走运!

完全意识到这篇文章是昨天创建的: React Chartjs, how to handle a dynamic number of datasets这是一个非常相似的问题，但遗憾的是没有答案。

我正在使用 Chart.JS 版本 2，并且有一个脚本可以处理 AJAX 请求以加载可变数量的数据集及其相应数据。

数据集标签和值实际上由表单中的文本输入中的脚本显示和访问。

在大多数情况下访问所有内容都很好，但创建一个循环来创建数据集是我一直失败的地方。

我希望这可能只是一个简单的循环，但我无法让它工作并且找到了其他几个解决方案，但尝试将他们的解决方案与我的脚本结合起来仍然没有成功。

脚本如下。 “GraphLabelString”输入和其他表单元素一样，访问没有问题，尽管获取数据集标签和值的代码目前已被注释掉，因为一旦我让循环开始工作，我就会越过那座桥。

非常感谢任何帮助。

function LoadProjectActivityGraph(ProjectRef, StartDate, EndDate)
{
var xmlhttp = new XMLHttpRequest();

    xmlhttp.onreadystatechange = function()
    {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
        {
        document.getElementById("ProjectActivityGraph").innerHTML = xmlhttp.responseText;

        //GET THE VALUE OF THE GRAPH LABELS FORM INPUT
        var GraphLabelString = document.forms.GraphData.GraphLabels.value;

        //TURN THE VALUE OF THE ABOVE INTO AN ARRAY
        var GraphLabelArray = GraphLabelString.split(","); 

        //GET THE VALUE OF THE TOTAL NUMBER OF DATASETS INPUTS
        var GraphTotalDatasets = parseInt(document.forms.GraphData.TotalDatasets.value);

        //SET THE GRAPH CONFIGURATION VALUES
        var LineChartConfig = {
                    type: 'line',
                data: {
                labels: GraphLabelArray,
                datasets: 
                    [ 

                        for (i=0; i < GraphTotalDatasets; i++)
                        {

                                {
                                label: 'apples',
                                //label: document.forms.GraphData['GraphDatasetLabel'+i].value,
                                data: [12, 19, 3, 17, 6, 3, 7],
                                //data: [document.forms.GraphData['GraphDatasetValues'+i].value],
                                fill: false,
                                borderColor: "red",
                                backgroundColor: "red",
                                pointBackgroundColor: "#ffffff",
                                tension: 0,
                                },

                        }

                    ]
                }
            };


        var ctx = document.getElementById("ProjectActivityGraphCanvas").getContext("2d");
        window.myLine = new Chart(ctx, LineChartConfig);


        }
    }
    xmlhttp.open("GET", "ProjectManagement/HoursManagement_AJAX/Response_ProjectActivityGraph.asp?ProjectRef="+ProjectRef+"&StartDate="+StartDate+"&EndDate="+EndDate, true);
    xmlhttp.send();

Answer 1

根据 Matt2 的建议，我最终得到了这个解决方案。

这是工作脚本:

function LoadProjectActivityGraph(ProjectRef, StartDate, EndDate)
{
var xmlhttp = new XMLHttpRequest();

    xmlhttp.onreadystatechange = function()
    {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
        {
        document.getElementById("ProjectActivityGraph").innerHTML = xmlhttp.responseText;

        //GET THE VALUE OF THE GRAPH LABELS FORM INPUT
        var GraphLabelString = document.forms.GraphData.GraphLabels.value;

        //TURN THE VALUE OF THE ABOVE INTO AN ARRAY
        var GraphLabelArray = GraphLabelString.split(","); 

        //GET THE VALUE OF THE TOTAL NUMBER OF DATASETS INPUTS
        var GraphTotalDatasets = parseInt(document.forms.GraphData.TotalDatasets.value);

        //CREATE AN ARRAY USED TO GENERATE THE DIFFERENT COLOURS FOR THE GRAPH
        //THIS ARRAY HAS 15 COLOURS SO CAN HANDLE A MAX OF 15 DATASETS
        //COLOUR ORDER IS RED GREEN BLUE ORANGE PURPLE CYAN BLACK DARK GREEN DARK BLUE LIGHT BLUE YELLOW, DARK PURPLE DARK RED LIGHT GREY DARK GREY
        var GraphColourArray = ['#ff0000', '#00ff00', '#0000ff', '#ffd400', '#ff00ff', '#00ffff', '#000000', '#008620', '#001a9f', '#0096ff', '#dccf00', '#8d0088', '#890101', '#beb4b4', '#686868'];

        var GraphDatasetsArray = [];

        for (i=0; i < GraphTotalDatasets; i++)
        {
        var DataArray = document.forms.GraphData['GraphDatasetValues'+i].value.split(","); 
        GraphDatasetsArray[i] = 
                            {
                            label: document.forms.GraphData['GraphDatasetLabel'+i].value,
                            data: DataArray, 
                            fill: false, 
                            borderColor: GraphColourArray[i], 
                            backgroundColor: GraphColourArray[i],
                            pointBackgroundColor: '#ffffff', 
                            tension: 0,
                            }   
        }

        //SET THE GRAPH CONFIGURATION VALUES
        var LineChartConfig = {
                    type: 'line',
                data: {
                labels: GraphLabelArray,
                datasets: GraphDatasetsArray
                    }
            };


        var ctx = document.getElementById("ProjectActivityGraphCanvas").getContext("2d");
        window.myLine = new Chart(ctx, LineChartConfig);
        window.myLine.update();

        }
    }
    xmlhttp.open("GET", "ProjectManagement/HoursManagement_AJAX/Response_ProjectActivityGraph.asp?ProjectRef="+ProjectRef+"&StartDate="+StartDate+"&EndDate="+EndDate, true);
    xmlhttp.send();