GOOGLE CHARTS使用工具折线图作为动态数组对象循环 [英] GOOGLE CHARTS using implement line charts as dynamic array objects loops
本文介绍了GOOGLE CHARTS使用工具折线图作为动态数组对象循环的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
数组对象看起来像这样，我从红宝石中按产品名称日期和成本从组中获取数据，并存储在一个变量中...
array objects look like this i get data from group by product name date and cost in ruby and store in one varible ...
第一个数组是产品的名称，第二个数组数据是日期和成本.如何结合并在x上显示日期，在y轴上显示成本，并带有产品名称
first array is a name of product and second array data is date and cost. how to combine and show on x as date and y-axis as cost with a product name
如何在图表中实现，例如我不知道如何在javascript中循环访问数组数据数组，并使用arraydatatable或data table在x和y轴上显示，如果我通过直接数据数组，则可以在highcharts上正常工作 我的代码:
how to implement in charts like I have no idea about how to iterate loop in javascript for an array of array data and show in x and y axis using arraydatatable or data table its working fine with highcharts if i pass direct data array my code :
<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>
推荐答案
您要为每个产品添加一个数据表列，
然后为产品数据中的每个数组添加一个数据表行
you'll want to add a data table column for each product,
then add a data table row for each array in product data
可能看起来像这样...
may look something like this...
$.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]);
});
});
请参阅以下工作片段...
see following working snippet...
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>
编辑
对于简单的数组数据，就象饼图一样容易.
for simple array data, it's easier, as for a pie chart...
// 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],
]);
});
请参阅以下工作片段...
see following working snippet...
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给出不正确的结果?
the date issue mentioned in the comment has to do with the way javascript parses dates from strings,
see this answer --> Why does Date.parse give incorrect results?
根据使用的格式，它可能会解析为本地时间或UTC
depending on the format used, it may be parsed to local time or UTC
运行以下代码段，注意控制台中打印的每个日期的结果有何不同...
run the following snippet, notice how the results are different for each date printed in the console...
console.log('2018-03-01 = ', new Date('2018-03-01'));
console.log('03/01/2018 = ', new Date('03/01/2018'));
要解决此问题，请使用以下格式-> 03/01/2018
to correct this issue, use this format --> 03/01/2018
请参阅以下工作片段...
see following working snippet...
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>
这篇关于GOOGLE CHARTS使用工具折线图作为动态数组对象循环的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
