【发布时间】:2014-01-31 01:49:07
【问题描述】:
我是 Google 图表的新手,我正在尝试在下面的照片(预期)中生成此图表 但我得到了一些不同的图表。我有三个不同的字母,每个字母都包含它们自己的值(A1、A2、A3、B1、B2 ... 例如)。
我正在尝试的代码:
function drawChart () {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('string', 'Type');
data.addColumn('number', 'Value');
data.addRows([
[new Date(2014, 0, 30), 'A', 75],
[new Date(2014, 0, 30), 'A', 100],
[new Date(2014, 0, 30), 'A', 125],
[new Date(2014, 0, 31), 'A', 75],
[new Date(2014, 0, 31), 'A', 100],
[new Date(2014, 0, 31), 'A', 125],
[new Date(2014, 0, 30), 'B', 150],
[new Date(2014, 0, 30), 'B', 175],
[new Date(2014, 0, 30), 'B', 200],
[new Date(2014, 0, 31), 'B', 150],
[new Date(2014, 0, 31), 'B', 175],
[new Date(2014, 0, 31), 'B', 200],
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, {
type: 'number',
label: 'A',
calc: function (dt, row) {
return (dt.getValue(row, 1) == 'A') ? dt.getValue(row, 2) : null;
}
}, {
type: 'number',
label: 'B',
calc: function (dt, row) {
return (dt.getValue(row, 1) == 'B') ? dt.getValue(row, 2) : null;
}
}, {
type: 'number',
label: 'C',
calc: function (dt, row) {
return (dt.getValue(row, 1) == 'C') ? dt.getValue(row, 2) : null;
}
}, 2]);
var chart = new google.visualization.LineChart(document.querySelector('#chart_div'));
chart.draw(view, {
height: 400,
width: 600,
hAxis: {
format: 'dd.MM.yyyy',
minValue: new Date(2014, 0, 29, 12),
maxValue: new Date(2014, 0, 31, 10)
},
series: {
0: {
// series A options
pointSize: 5,
lineWidth: 0
},
3: {
// this series draws the line
pointSize: 0,
lineWidth: 1,
visibleInLegend: false,
enableInteractivity: false,
color:'blue'
}
}
});
}
google.load('visualization', '1', {packages: ['corechart'], callback: drawChart});
它向我展示了这一点,我不知道如何删除 31.01.2014 -> A3 和 30.01.2014->B1 中的一条线以及蓝点蓝线和红点红线的线颜色是否可能? :
但预期如下:
【问题讨论】:
-
请分享您尝试过的代码,以及为什么它不起作用。
-
jmac 我添加了我正在尝试的代码,如果你能帮助我会更好。谢谢
-
生成难吗?
标签: google-visualization linegraph