谷歌图表使用实现折线图作为动态数组对象循环

Question

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

第一个数组是产品名称，第二个数组数据是日期和成本。 如何将 X 作为日期组合并在 Y 轴上显示为成本与产品名称

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

<script type="text/javascript">
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);
}
</script>

<script type="text/javascript">
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);
}
</script>

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%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="chart" id="chart_div"></div>

---

编辑

对于简单的数组数据，它更容易，就像饼图一样......

// create data table
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('string', 'Product');
dataTable.addColumn('number', 'Value');
$.each(jsonData, function(productIndex, product) {
// add product data
dataTable.addRow([
product[0],
product[1],
]);
});

---

请参阅以下工作片段...

google.charts.load('current', {
packages: ['corechart']
}).then(function () {
// get column 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, 'Column');
});
// get pie data
$.ajax({
url: 'path to data',
dataType: 'json'
}).done(function (jsonData) {
loadData(jsonData);
}).fail(function (jqXHR, textStatus, errorThrown) {
var jsonData = [["product1",3.6126719999999977],["product2",6.827597999999999],["product2",1008.0]];
loadData(jsonData, 'Pie');
});
// load json data
function loadData(jsonData, chartType) {
// create data table
var dataTable = new google.visualization.DataTable();
switch (chartType) {
case 'Column':
// add date column
dataTable.addColumn('date', 'Date');
$.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]);
});
});
break;
case 'Pie':
// add product columns
dataTable.addColumn('string', 'Product');
dataTable.addColumn('number', 'Value');
$.each(jsonData, function(productIndex, product) {
// add product data
dataTable.addRow([
product[0],
product[1],
]);
});
break;
}
// draw chart
$(window).resize(function () {
drawChart(chartType, dataTable);
});
drawChart(chartType, dataTable);
}
// save charts for redraw
var charts = {};
var options = {
Column: {
chartArea: {
height: '100%',
width: '100%',
top: 64,
left: 64,
right: 32,
bottom: 48
},
height: '100%',
legend: {
position: 'top'
},
pointSize: 4,
width: '100%'
},
Pie: {
height: '100%',
width: '100%'
}
};
// draw chart
function drawChart(chartType, dataTable) {
if (!charts.hasOwnProperty(chartType)) {
charts[chartType] = new google.visualization.ChartWrapper({
chartType: chartType + 'Chart',
containerId: 'chart-' + chartType.toLowerCase(),
options: options[chartType]
});
}
charts[chartType].setDataTable(dataTable);
charts[chartType].draw();
}
});

html, body {
height: 100%;
margin: 0px 0px 0px 0px;
overflow: hidden;
padding: 0px 0px 0px 0px;
}
.chart {
display: inline-block;
height: 100%;
width: 49%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="chart" id="chart-column"></div>
<div class="chart" id="chart-pie"></div>

---

编辑 2

google.charts.load('current', {
packages: ['corechart']
}).then(function () {
// get data 0
$.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, '0', 'Column');
});
// get data 1
$.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, '1', 'Column');
});
// get data 2
$.ajax({
url: 'path to data',
dataType: 'json'
}).done(function (jsonData) {
loadData(jsonData);
}).fail(function (jqXHR, textStatus, errorThrown) {
var jsonData = [["product1",3.6126719999999977],["product2",6.827597999999999],["product2",1008.0]];
loadData(jsonData, '2', 'Pie');
});
// load json data
function loadData(jsonData, id, chartType) {
// create data table
var dataTable = new google.visualization.DataTable();
switch (chartType) {
case 'Column':
// add date column
dataTable.addColumn('date', 'Date');
$.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]);
});
});
break;
case 'Pie':
// add product columns
dataTable.addColumn('string', 'Product');
dataTable.addColumn('number', 'Value');
$.each(jsonData, function(productIndex, product) {
// add product data
dataTable.addRow([
product[0],
product[1],
]);
});
break;
}
// draw chart
$(window).resize(function () {
drawChart(id, chartType, dataTable);
});
drawChart(id, chartType, dataTable);
}
// save charts for redraw
var charts = {};
var options = {
Column: {
chartArea: {
height: '100%',
width: '100%',
top: 64,
left: 64,
right: 32,
bottom: 48
},
height: '100%',
legend: {
position: 'top'
},
pointSize: 4,
width: '100%'
},
Pie: {
height: '100%',
width: '100%'
}
};
// 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 {
display: inline-block;
height: 100%;
width: 32%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="chart" id="chart-0"></div>
<div class="chart" id="chart-1"></div>
<div class="chart" id="chart-2"></div>

---

编辑 3

评论中提到的日期问题与 JavaScript 从字符串解析日期的方式有关，
请参阅此答案 --> 为什么 Date.parse 给出不正确的结果？

根据所使用的格式，可能会将其解析为本地时间或 UTC

运行以下代码片段，注意控制台中打印的每个日期的结果有何不同...

console.log('2018-03-01 = ', new Date('2018-03-01'));
console.log('03/01/2018 = ', new Date('03/01/2018'));

若要更正此问题，请使用此格式 -->03/01/2018

请参阅以下工作片段...

google.charts.load('current', {
packages: ['corechart']
}).then(function () {
// save charts for redraw
var charts = {};
var options = {
Column: {
chartArea: {
height: '100%',
width: '100%',
top: 64,
left: 64,
right: 32,
bottom: 48
},
height: '100%',
legend: {
position: 'top'
},
pointSize: 4,
width: '100%'
},
Pie: {
height: '100%',
width: '100%'
}
};
// get data
var jsonData = [{"name":"product a","data":[["03/01/2018",18.89034482758612],["03/02/2018",18.89268292682916],["03/05/2018",18.89324503311252],["03/07/2018",18.89268292682916],["03/10/2018",18.89377777777766],["03/11/2018",18.893525179856],["03/12/2018",18.89359999999988],["03/13/2018",18.89311475409824],["03/14/2018",18.89311475409824],["03/15/2018",18.89294117647046],["03/16/2018",18.89272727272716],["03/17/2018",18.89387173396662],["03/18/2018",18.89366292134818],["03/19/2018",18.8923456790122]]},{"name":"product b","data":[["03/01/2018",18.89034482758612],["03/02/2018",18.89268292682916],["03/05/2018",18.89324503311252],["03/07/2018",18.89268292682916],["03/10/2018",18.89377777777766],["03/11/2018",18.893525179856],["03/12/2018",18.89359999999988],["03/13/2018",18.89311475409824],["03/14/2018",18.89311475409824],["03/15/2018",18.89294117647046],["03/16/2018",18.89272727272716],["03/17/2018",18.89387173396662],["03/18/2018",18.89366292134818],["03/19/2018",18.8923456790122]]}];
loadData(jsonData, '0', 'Column');
// load json data
function loadData(jsonData, id, chartType) {
// create data table
var dataTable = new google.visualization.DataTable();
switch (chartType) {
case 'Column':
// add date column
dataTable.addColumn('date', 'Date');
$.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]);
});
});
break;
case 'Pie':
// add product columns
dataTable.addColumn('string', 'Product');
dataTable.addColumn('number', 'Value');
$.each(jsonData, function(productIndex, product) {
// add product data
dataTable.addRow([
product[0],
product[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%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="chart" id="chart-0"></div>