我想创建一个包含 3 列的谷歌图表。我还想向其中添加 2 组数据。理解请引用JS代码。
你也可以查看https://jsfiddle.net/dt6syt2w/2/
我期待从用户那里得到一些解决方案:asgallant
google.load('visualization', '1', {packages: ['corechart', 'line']});
google.setOnLoadCallback(drawTrendlines);
function drawTrendlines()
{
var data1 = new google.visualization.DataTable();
data1.addColumn('number', 'X');
data1.addColumn('number', 'Normal Value 1');
data1.addColumn('number', 'Peak Value 1');
data1.addRows([
[0, 0, 0], [1, 10, 15], [2, 23, 25], [3, 17, 26], [4, 18, 30], [5, 9, 20],
[6, 11, 25], [7, 27, 30]
]);
var data2 = new google.visualization.DataTable();
data2.addColumn('number', 'X');
data2.addColumn('number', 'Normal Value 2');
data2.addColumn('number', 'Peak Value 2');
data2.addRows([
[1, 1, 1], [2, 20, 25], [3, 25, 30], [4, 23, 35], [5, 28, 36], [6, 19, 40], [7, 80, 100]
]);
var joinedData = google.visualization.data.join(data1, data2, 'full', [[0, 0, 0]], [1], [1], [1]);
var options = {
hAxis: {
title: 'Time'
},
vAxis: {
title: 'Popularity'
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(joinedData, options);
}
最佳答案
只需修复您的 join()
调用:
var joinedData = google.visualization.data.join(data1, data2, 'full', [[0, 0]], [1, 2], [1, 2]);
[[0, 0]]
为传入的每个数据表比较列位置 0 处的键。提供给下一个参数的 [1, 2]
加入每个数据表中位置 1 和 2 的列。由于名为 Normal Value 1
、Peak Value 1
、Normal Value 2
和 Peak Value 2
的列位于那些位置,数据来自那里。
google.load('visualization', '1', {
packages: ['corechart', 'line']
});
google.setOnLoadCallback(drawTrendlines);
function drawTrendlines() {
var data1 = new google.visualization.DataTable();
data1.addColumn('number', 'X');
data1.addColumn('number', 'Normal Value 1');
data1.addColumn('number', 'Normal Value 2');
data1.addRows([
[0, 0, 0],
[1, 10, 15],
[2, 23, 25],
[3, 17, 26],
[4, 18, 30],
[5, 9, 20],
[6, 11, 25],
[7, 27, 30]
]);
var data2 = new google.visualization.DataTable();
data2.addColumn('number', 'X');
data2.addColumn('number', 'Peak Value 1');
data2.addColumn('number', 'Peak Value 2');
data2.addRows([
[1, 1, 1],
[2, 20, 25],
[3, 25, 30],
[4, 23, 35],
[5, 28, 36],
[6, 19, 40],
[7, 80, 100]
]);
var joinedData = google.visualization.data.join(data1, data2, 'full', [
[0, 0]
], [1, 2], [1, 2]);
var options = {
hAxis: {
title: 'Time'
},
vAxis: {
title: 'Popularity'
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(joinedData, options);
}
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="chart_div">
<div>
关于javascript - 具有 3 列的 Google 图表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30231876/