谷歌LineChart：线图问题可能在一个图表中组合3个数据arrays？

我需要图形看起来像这样的方式x轴产品名称1 X轴：日期2. y轴：成本3.线点应该是产品名称

google.charts.load('current', { packages: ['corechart'] }).then(function () { var charts = {}; var options = { Column: { chartArea: { height: '100%', width: '100%', top: 24, left: 64, right: 32, bottom: 48, }, tooltip: { valueDecimals: 2, valueSuffix: ' USD', valuePrefix: '$' }, 'vAxis': { title: 'Cost in USD ($)', format:'$#', }, height: '100%', legend: { position: 'bottom' }, pointSize: 4, width: '100%' }, }; // columns charts data var jsonData = [["2017-01-01", 83578], ["2017-02-01", 208529], ["2017-03-01", 211377], ["2017-04-01", 215149], ["2017-05-01", 215149]]; loadData(jsonData, '1', 'Line'); var data2 = [["2017-02-01", 332], ["2017-03-01", 341], ["2017-04-01", 339], ["2017-05-01", 339]]; // load json data function loadData(jsonData, id, chartType) { // create data table var dataTable = new google.visualization.DataTable(); switch (chartType) { case 'Line': var chartData = []; chartData.push(['date', 'Cost']); jsonData.forEach(function (row) { chartData.push([row[0], parseFloat(row[1])]); }); var dataTable = google.visualization.arrayToDataTable(chartData); // drawChart(); // var chartData = []; // chartData.push(['date', 'Cost']); // data2.forEach(function (row) { // chartData.push([row[0], parseFloat(row[1])]); // }); //var dataTable = google.visualization.arrayToDataTable(chartData); //var joinedData = google.visualization.data.join(data1, data2, 'full', [[0, 0]], [1], [1]); break; } // draw chart $(window).resize(function () { drawChart(id, chartType, dataTable); }); drawChart(id, chartType, dataTable); } // draw chart function drawChart(id, chartType, dataTable) { if (!charts.hasOwnProperty(id)) { charts[id] = new google.visualization.ChartWrapper({ chartType: chartType + 'Chart', containerId: 'chart-' + id, options: options[chartType] }); } charts[id].setDataTable(dataTable); charts[id].draw(); } }); 

 html, body { height: 100%; margin: 0px 0px 0px 0px; overflow: hidden; padding: 0px 0px 0px 0px; } .chart { height: 100%; } 

我从一个变量获取数据但如何在一个图表中加入所有varbile数据？ 数据类别1（pro1）= [[“2017-02-01”，332]，[“2017-03-01”，341]，[“2017-04-01”，339]，[“ 01“，339]]

category2（pro2）= [[“2017-01-01”，83578]，[“2017-02-01”，208529]，[“2017-03-01”，211377]，[“2017-04-01” ，215149]，[“2017-05-01”，215149]]

category3（pro3）= [[“2017-01-01”，618185]，[“2017-03-01”，735490]，[“2017-04-01”，642381]] category4（pro4）= [[“ 2017-01-01“，3299]]

Answer 1

在图表的数据表中为每个数组添加一列，
为数组中的每个元素添加一行，
然后按日期对数据表进行分组……

对于标签，创建一个名称数组，
只要确保有与数据arrays相同数量的标签……

 var names = ['Aws', 'Azure', 'Other 1', 'Other 2']; 

然后…

 // add category column var colIndex = dataTable.addColumn('number', names[categoryIndex]); 

请参阅以下工作代码段…

 google.charts.load('current', { packages: ['corechart'] }).then(function () { // save charts for redraw var charts = {}; // combine data into array var jsonData = []; var category1 = [["2017-02-01", 332], ["2017-03-01", 341], ["2017-04-01", 339], ["2017-05-01", 339]]; var category2 = [["2017-01-01", 83578], ["2017-02-01", 208529], ["2017-03-01", 211377], ["2017-04-01", 215149], ["2017-05-01", 215149]]; var category3 = [["2017-01-01", 618185], ["2017-03-01", 735490], ["2017-04-01", 642381]]; var category4 = [["2017-01-01", 3299]]; var names = ['Aws', 'Azure', 'Other 1', 'Other 2']; jsonData.push(category1); jsonData.push(category2); jsonData.push(category3); jsonData.push(category4); // create data table var dataTable = new google.visualization.DataTable(); dataTable.addColumn('string', 'Date'); var aggColumns = []; $.each(jsonData, function(categoryIndex, category) { // add category column var colIndex = dataTable.addColumn('number', names[categoryIndex]); aggColumns.push({ aggregation: google.visualization.data.sum, column: colIndex, label: dataTable.getColumnLabel(colIndex), type: dataTable.getColumnType(colIndex) }); // add category data $.each(category, function(dataIndex, data) { var rowIndex = dataTable.addRow(); dataTable.setValue(rowIndex, 0, data[0]); dataTable.setValue(rowIndex, colIndex, data[1]); }); }); // group data var dataTable = google.visualization.data.group( dataTable, [0], aggColumns ); // draw chart $(window).resize(function () { drawChart('0', dataTable); }); drawChart('0', dataTable); // draw chart function drawChart(id, dataTable) { if (!charts.hasOwnProperty(id)) { charts[id] = new google.visualization.ChartWrapper({ chartType: 'LineChart', containerId: 'chart-' + id }); } charts[id].setDataTable(dataTable); charts[id].draw(); } }); 

 html, body { height: 100%; margin: 0px 0px 0px 0px; overflow: hidden; padding: 0px 0px 0px 0px; } .chart { height: 100%; }