Javascript內部生成代碼

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（）