Question

做了一些狩猎后，我觉得我已经接近解决方案了几次唉还是没有运气！

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

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

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

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

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

脚本如下。＆＃34; GraphLabelString＆＃34;输入正在访问没有问题，其他表单元素也是如此，尽管获取数据集标签和值的代码当前已被注释掉，因为一旦我使循环工作，我将越过该桥。

任何帮助都非常适用。

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

}

Chart JS动态数据集数量

1 个答案: