Question

我是初学者，我有这个javascript函数：

function draw() {
        var chart = new CanvasJS.Chart("chartContainer", {
            title: {
                text: "Title of graph"
            },
            axisX: {
                interval: 0.05
            },
            data: [{
                type: "line",
                dataPoints: [
                    { x: xa[0], y: ya[0] },
                    { x: xa[1], y: ya[1] },
                    { x: xa[2], y: ya[2] },
                    { x: xa[3], y: ya[3] },
                    { x: xa[4], y: ya[4] },
                    { x: xa[5], y: ya[5] },
                ]
            }]
        });
        chart.render();
    }

手动生成轴（x和y）是很长时间，我试图在那里进行一次while循环。但是，我觉得它对我不起作用，我犯了一些错误。

var i = 0;
while (i < 10)
{

{ x: xa[i], y: ya[i] },

i++;

}

如何让它在里面工作？要在代码中生成轴...我使用CanvasJS库生成图表，我想自动生成...

xa 和 ya 是数组......而且每个索引都是不同的值。我想用循环展示每一个。

感谢您的帮助。

Answer 1

我相信这对你有用。没有测试它，但我觉得它看起来不错。

function draw() {
    var i = 0;
    var pointArray = []; 

    while (i < 10)
    {
        pointArray.push({ x: xa[i], y: ya[i] });
        i++;

    }

    var chart = new CanvasJS.Chart("chartContainer", {
        title: {
            text: "Title of graph"
        },
        axisX: {
            interval: 0.05
        },
        data: [{
            type: "line",
            dataPoints: pointArray
        }]
    });
    chart.render();
}

Answer 2

您可以定义图表，然后按照您尝试的方式将每个点推送到它：

function draw() {
    var chart = new CanvasJS.Chart("chartContainer", {
        title: {
            text: "Title of graph"
        },
        axisX: {
            interval: 0.05
        },
        data: [{
            type: "line",
            // Define as an empty array to use the Array.prototype.push() method
            dataPoints: [] 
        }]
    });

    // Iterate through all x data points
    // This follows the assumption that xa.length === ya.length
    // This also will scale with the size of xa
    for(var i = 0; i < xa.length; i++) {
        // Push a new {x, y} object to the dataPoints array of the first data set
        chart.data[0].dataPoints.push({x: xa[i], y: ya[i]});
    }

    chart.render();
}

MDN Array.prototype.push()

Javascript在里面生成代码

2 个答案: