GOOGLE CHARTS使用工具折线图作为动态数组对象循环

数组对象看起来像这样我从ruby中按产品名称日期和成本获取数据并存储在一个变量中…

第一个数组是产品名称，第二个数组数据是日期和成本。 如何将x作为日期和y轴组合并显示为具有产品名称的成本

如何在图表中实现，我不知道如何在javascript中迭代循环数组数据并使用arraydatatable或数据表在x和y轴上显示如果我传递直接数据数组我的代码，它与highcharts工作正常：

 data2 = [{"name":"productname","data":[["2018-03-01",18.89034482758612],["2018-03-02",18.89268292682916],["2018-03-05",18.89324503311252],["2018-03-07",18.89268292682916],["2018-03-10",18.89377777777766],["2018-03-11",18.893525179856],["2018-03-12",18.89359999999988],["2018-03-13",18.89311475409824],["2018-03-14",18.89311475409824],["2018-03-15",18.89294117647046],["2018-03-16",18.89272727272716],["2018-03-17",18.89387173396662],["2018-03-18",18.89366292134818],["2018-03-19",18.8923456790122]]}] google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable(data2 ); var options = { title: 'Company Performance', curveType: 'function', legend: { position: 'bottom' } }; var chart = new google.visualization.LineChart(document.getElementById('curve_chart')); chart.draw(data, options); }  

  google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable(data2); // how to iterate loop for get all data from one varible var options = { title: 'Company Performance', curveType: 'function', legend: { position: 'bottom' } }; var chart = new google.visualization.LineChart(document.getElementById('curve_chart')); chart.draw(data, options); }  

Answer 1

您需要为每个产品添加数据表列，
然后为产品数据中的每个数组添加数据表行

可能看起来像这样……

 $.each(jsonData, function(productIndex, product) { // add product column var colIndex = dataTable.addColumn('number', product.name); // add product data $.each(product.data, function(dataIndex, data) { var rowIndex = dataTable.addRow(); dataTable.setValue(rowIndex, 0, new Date(data[0])); dataTable.setValue(rowIndex, colIndex, data[1]); }); }); 

请参阅以下工作代码段…

 google.charts.load('current', { packages: ['corechart'] }).then(function () { // create chart var container = $('#chart_div').get(0); var chart = new google.visualization.LineChart(container); var options = { chartArea: { height: '100%', width: '100%', top: 64, left: 64, right: 32, bottom: 48 }, height: '100%', legend: { position: 'top' }, pointSize: 4, width: '100%' }; // create data table var dataTable = new google.visualization.DataTable(); dataTable.addColumn('date', 'Date'); // get data $.ajax({ url: 'path to data', dataType: 'json' }).done(function (jsonData) { loadData(jsonData); }).fail(function (jqXHR, textStatus, errorThrown) { var jsonData = [{"name":"product a","data":[["2018-03-01",18.89034482758612],["2018-03-02",18.89268292682916],["2018-03-05",18.89324503311252],["2018-03-07",18.89268292682916],["2018-03-10",18.89377777777766],["2018-03-11",18.893525179856],["2018-03-12",18.89359999999988],["2018-03-13",18.89311475409824],["2018-03-14",18.89311475409824],["2018-03-15",18.89294117647046],["2018-03-16",18.89272727272716],["2018-03-17",18.89387173396662],["2018-03-18",18.89366292134818],["2018-03-19",18.8923456790122]]},{"name":"product b","data":[["2018-03-01",18.99034482758612],["2018-03-02",18.99268292682916],["2018-03-05",18.99324503311252],["2018-03-07",18.99268292682916],["2018-03-10",18.99377777777766],["2018-03-11",18.993525179856],["2018-03-12",18.99359999999988],["2018-03-13",18.99311475409824],["2018-03-14",18.99311475409824],["2018-03-15",18.99294117647046],["2018-03-16",18.99272727272716],["2018-03-17",18.99387173396662],["2018-03-18",18.99366292134818],["2018-03-19",18.9923456790122]]}]; loadData(jsonData); }); // load json data function loadData(jsonData) { $.each(jsonData, function(productIndex, product) { // add product column var colIndex = dataTable.addColumn('number', product.name); // add product data $.each(product.data, function(dataIndex, data) { var rowIndex = dataTable.addRow(); dataTable.setValue(rowIndex, 0, new Date(data[0])); dataTable.setValue(rowIndex, colIndex, data[1]); }); }); drawChart(); } // draw chart $(window).resize(drawChart); function drawChart() { chart.draw(dataTable, options); } }); 

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