循环以便在Javascript中生成数据点 [英] Loop in order to generate data points in Javascript

问题描述

我试图为两种（或更多）产品，即驱蚊剂和液体肥皂产生面积图。我正在使用JavaScript库CanvasJS来做到这一点。问题是我需要大约2000个数据点而不是4个硬编码，问题是我无法为两个（或更多）产品生成一个for循环。任何人都可以帮助我如何创建此循环？

  var chart = new CanvasJS.Chart（chartContainer，{
数据：[{
 type：area，
 name：Mosquito Repellents，
 showInLegend：true，
 dataPoints：[{
y： 83450，
 label：spring
}，{
y：51240，
 label：summer
}，{
y：64120，
 label：fall
}，{
y：71450，
 label：winter
} 
 
] 
}， {
 type：area，
 name：Liquid Soap，
 showInLegend：true，
 dataPoints：[{
y：20140，
标签：spring
}，{
y：30170，
标签：summer
}，{
y：24410， 
 label：autumn
}，{
y：38120，
 label：fall
} 
 
] 
 }] 
}）; 
  

解决方案

您可以使用Math.random函数和函数完成它。
函数使用两个参数来设置随机y值的上限和下限。

  var mosquitoRepellentsDataPoints = generateDataPoints（10000，40000），
 liquidSoapDataPoints = generateDataPoints（10000，40000）; 
 
 var chart = new CanvasJS.Chart（chartContainer，{
 data：[{
 type：area，
 name：Mosquito Repellents， 
 showInLegend：true，
 dataPoints：mosquitoRepellentsDataPoints 
}，{
类型：area，
名称：Liquid Soap，
 showInLegend ：true，
 dataPoints：liquidSoapDataPoints 
}] 
}）; 
 
 $ b函数generateDataPoints（lowerLimit，upperLimit）{
 var i，
 arr = []，
 seasons = ['spring'，'summer' ，秋天，冬天]; （i = 0; i <2000; i ++）{
 arr.push（{
y：lowerLimit + Math.round（Math.random（）*（upperLimit） -  lowerLimit）），
 label：seasons [Math.floor（Math.random（）* seasons.length）] 
}）; 
} 
 return arr; 
} 
  

I am trying to generate an area graph for two (or more) products i.e. Mosquito Repellents and Liquid Soap. I am using the JavaScript library CanvasJS to do that. The problem is that I need approximately 2000 data points instead of 4 hardcoded here and the problem is that I am unable to generate a for loop for two (or more) products that will do this for me. Can anyone help me on how to create this loop?

var chart = new CanvasJS.Chart("chartContainer", {
    data: [{
        type: "area",
        name: "Mosquito Repellents",
        showInLegend: "true",
        dataPoints: [{
                y: 83450,
                label: "spring"
            }, {
                y: 51240,
                label: "summer"
            }, {
                y: 64120,
                label: "fall"
            }, {
                y: 71450,
                label: "winter"
            }

        ]
    }, {
        type: "area",
        name: "Liquid Soap",
        showInLegend: "true",
        dataPoints: [{
                y: 20140,
                label: "spring"
            }, {
                y: 30170,
                label: "summer"
            }, {
                y: 24410,
                label: "autumn"
            }, {
                y: 38120,
                label: "fall"
            }

        ]
    }]
});

解决方案

You can use the Math.random function and a function to get it done. The function takes two parameters to set the lower and upper limits of the random y value.

var mosquitoRepellentsDataPoints = generateDataPoints(10000, 40000),
    liquidSoapDataPoints = generateDataPoints(10000, 40000);

var chart = new CanvasJS.Chart("chartContainer", {
    data: [{
        type: "area",
        name: "Mosquito Repellents",
        showInLegend: "true",
        dataPoints: mosquitoRepellentsDataPoints
    }, {
        type: "area",
        name: "Liquid Soap",
        showInLegend: "true",
        dataPoints: liquidSoapDataPoints
    }]
});


function generateDataPoints(lowerLimit, upperLimit) {
    var i,
        arr = [],
        seasons = ['spring', 'summer', 'fall', 'winter'];

    for (i = 0; i < 2000; i++) {
        arr.push({
            y: lowerLimit + Math.round(Math.random() * (upperLimit - lowerLimit)),
            label: seasons[Math.floor(Math.random() * seasons.length)]
        });
    }
    return arr;
}

这篇关于循环以便在Javascript中生成数据点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！