谷歌LineChart：线图问题可能在一个图表中组合3个数据阵列？ [英] Google LineChart: issue with line graph combine 3 data array in one chart possible?
问题描述
我需要图形看起来像这样的方式x轴产品名称
1 X轴：日期
2. y轴：成本
3.线点应该是产品名称
i need graph look like this way below x axis product name 1 X axis : date 2. y axis : cost 3. line points should be a product name
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%;
}
<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-1"></div>
我从一个变量获取数据，但如何在一个图表中加入所有varbile数据？
数据类别1（pro1）= [[2017-02-01，332]，[2017-03-01，341]，[2017-04-01，339]，[ 2017-05-01，339]]
i get data from one varible but how to join all varbile data in one chart ?? data as category1(pro1) = [["2017-02-01", 332], ["2017-03-01", 341], ["2017-04-01", 339], ["2017-05-01", 339]]
category2（pro2）= [[2017-01-01，83578]，[2017-02-01 ，208529]，[2017-03-01，211377]，[2017-04-01，215149]，[2017-05-01，215149]]
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]]
category3(pro3) =[["2017-01-01", 618185], ["2017-03-01", 735490], ["2017-04-01", 642381]] category4(pro4) = [["2017-01-01", 3299]]
推荐答案
添加一列到图表的每个数组的数据表，
为数组中的每个元素添加一行，
然后按日期对数据表进行分组...
add a column to the chart's data table for each array,
add a row for each element in the arrays,
then group the data table on date...
对于标签，创建一个名称数组，
只要确保有与数据数组相同数量的标签......
for labels, create an array of the names,
just be sure there are the same number of labels as there are data arrays...
var names = ['Aws', 'Azure', 'Other 1', 'Other 2'];
然后......
// add category column
var colIndex = dataTable.addColumn('number', names[categoryIndex]);
请参阅以下工作代码段...
see following working snippet...
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%;
}
<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>
这篇关于谷歌LineChart：线图问题可能在一个图表中组合3个数据阵列？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
