我是Google Graphs的新手,我正在努力在下面的照片(预期)中生成此图表 但我得到了一点点不同的图表。我有三个不同的字母,每个字母都包含自己的值(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和蓝色圆点蓝色线和红色圆点红色线可以吗? :
但预计会出现以下情况:
答案 0 :(得分:1)
在这种情况下,我对previous question的回答并不是最好的解决方法,但有一个简单的解决方案可以修改现有代码以使其正常工作。从传递给2
的数组末尾删除view.setColumns
:
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;
}
}]);
并调整系列选项:
series: {
0: {
// series A options
pointSize: 5,
lineWidth: 1
},
1: {
// series B options
pointSize: 5,
lineWidth: 1
},
2: {
// series C options
pointSize: 5,
lineWidth: 1
}
}