如何在中为一行添加按列动态的数据

How to add data column wise dynamic in for a row?

本文关键字：添加 一行 动态 数据      更新时间：2023-09-26

这个问题是关于谷歌折线图，它会显示不同的线，即周期线

我有一个数据数组，长度是未知的，即Cycle_x。

我将动态获取以下数据

arrayCycleName=['Cycle_1','Cycle_3','Cycle_3','Cycle_4',....];
arrayModNames=['mod_1','mod_2','mod_3','mod_4'];
arrayCycle_1_Data=[50,30,10,15];
arrayCycle_2_Data=[40,20,42,44];
arrayCycle_3_Data=[30,34,36,40];
so on..

我正在使用DataTale

var data = new google.visualization.DataTable();
var chart = new google.visualization.LineChart(document
            .getElementById('charts'));
data.addColumn('string', 'Module Names');
for (i=0;i<arrayCycleName.lenght;i++)
data.addColumn('number', arrayCycleName[i]);

现在的问题是，如何使用任何一个循环获得如下数据。

data=[
       ['CycleName', 'Cycle_1', 'Cycle_2', 'Cycle_3'],
       ['Mod_1'    ,    50    ,    40    ,      30  ],
       ['Mod_2'    ,    30    ,    20    ,      34  ],
       ['Mod_3'    ,    10    ,    42    ,      36  ],
       ['Mod_4'    ,    15    ,    44    ,      40  ]
     ]

所以我可以打电话给

chart.draw(data,{title: 'charts'});

一种可能的解决方案：

function drawChart() {
    var data = new google.visualization.DataTable();
    var arrayCycleName = ['Cycle_1', 'Cycle_3', 'Cycle_3'];
    var arrayModNames = ['mod_1', 'mod_2', 'mod_3', 'mod_4'];
    var arrayCycle_1_Data = [50,30,10,15];
    var arrayCycle_2_Data = [40,20,42,44];
    var arrayCycle_3_Data = [30,34,36,40];
    var arrayCycles = [arrayCycle_1_Data, arrayCycle_2_Data, arrayCycle_3_Data]
    data.addColumn('string', 'CycleName');
    for (var i = 0; i < arrayCycleName.length; ++i) {
        data.addColumn('number', arrayCycleName[i]);
    }
    for (var i = 0; i < arrayModNames.length; ++i) {
        var row = [];
        row.push(arrayModNames[i]);
        for (var j = 0; j < arrayCycles.length; ++j) {
            row.push(arrayCycles[j][i]);
        }
        console.log(row);
        data.addRow(row);
    }
    console.log(data);
    var options = {
        title: 'charts',
        vAxis: {
            minValue: 0
        }
    };
    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, options);
}

请参阅jsbin中的示例。

相关文章：