我正在研究谷歌折线图，我希望在x轴上加倍标注（日期明智的流程），我能够使用以下代码绘制没有日期的图表，但无法填充日期，
<html>
<head>
<title>Google Charts Tutorial</title>
<script type="text/javascript" src="loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['corechart']});
</script>
</head>
<body>
<div id="container"
style="width: 1610px; height: 400px; margin-left:-120px;"></div>
<script language="JavaScript">
\
function drawChart() {
// Define the chart to be drawn.
var data = new google.visualization.DataTable();
data.addColumn('string', '');
data.addColumn('number', 'Suceess');
data.addColumn('number', 'Error');
data.addColumn('number', 'Warning');
data.addRows([
['RE-LINK|', 266, 2136, 472],
['UPDATE-IB', 0, 1722, 2728],
['UPDATE-SA', 0, 43580, 87713],
['CREATE-IB/SA', 0, 18920, 103690],
['TERMINATE-IB', 0, 2, 0],
['TERMINATE-COVERAGE', 3682, 5917, 0],
['ADD-COVERAGE AND CHANGE-SITE', 1101, 2433, 7887],
['day1--CREATE-IB', 36647, 0,1064]
]);
data.addRows([
['RE-LINK', 11649, 221, 1127],
['UPDATE-IB', 0, 4844, 79886],
['UPDATE-SA', 0, 2961, 7377],
['CREATE-IB/SA', 0, 3993, 13268],
['TERMINATE-IB', 4105, 0, 0],
['TERMINATE-COVERAGE', 1844, 10834, 0],
['day2--ADD-COVERAGE AND CHANGE-SITE', 218, 717, 10498]
]);
data.addRows([
['RE-LINK', 3484, 3, 28],
['UPDATE-IB', 0, 139207, 238037],
['UPDATE-SA', 0, 3, 3],
['CREATE-IB/SA', 0, 4598, 12680],
['TERMINATE-COVERAGE', 480, 1210, 90],
['day3--ADD-COVERAGE AND CHANGE-SITE', 1, 72, 2372]
]);
data.addRows([
['RE-LINK', 7142, 465, 1427],
['UPDATE-IB', 0, 105719, 216275],
['UPDATE-SA', 0, 14761, 31698],
['CREATE-IB/SA', 0, 5071, 14184],
['TERMINATE-IB', 18, 10, 0],
['TERMINATE-COVERAGE', 5265, 1280, 98],
['day4--ADD-COVERAGE AND CHANGE-SITE', 1173, 12474, 15545]
]);
// Set chart options
var options = {'title' : 'Applications status biz process wise(4 Days)',
hAxis: {
title: '',
textStyle: {
color: '#01579b',
fontSize: 10,
fontName: 'Arial',
bold: true,
italic: true
},
titleTextStyle: {
color: '#01579b',
fontSize: 12,
fontName: 'Arial',
bold: false,
italic: true
},
slantedTextAngle:90
},
vAxis: {
title: '',
textStyle: {
color: '#1a237e',
fontSize: 12,
bold: true
},
titleTextStyle: {
color: '#1a237e',
fontSize: 12,
bold: true
}
},
'width':1600,
'height':400,
colors: ['#00ff00', '#ff0000','#ffe102'],
legend: { position: 'top' },
};
// Instantiate and draw the chart.
var chart = new google.visualization.LineChart(document.getElementById('container'));
chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);
</script>
</body>
</html>
请帮助解决这个问题....
答案 0 :(得分：1)
虽然通过标准配置选项无法提供所请求的布局，但是 如果您可以手动修改svg，则可以实现
当图表的'ready'事件触发时，添加类别标签和组线
请参阅以下工作代码段，这只是展示可能性的一个示例
基于图表的大小和位置做出了几个假设......
google.charts.load('current', {
callback: drawChart,
packages:['corechart']
});
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', '');
data.addColumn('string', '');
data.addColumn('number', 'Success');
data.addColumn('number', 'Error');
data.addColumn('number', 'Warning');
data.addRows([
[new Date('12/01/2016'), 'RE-LINK|', 266, 2136, 472],
[new Date('12/01/2016'), 'UPDATE-IB', 0, 1722, 2728],
[new Date('12/01/2016'), 'UPDATE-SA', 0, 43580, 87713],
[new Date('12/01/2016'), 'CREATE-IB/SA', 0, 18920, 103690],
[new Date('12/01/2016'), 'TERMINATE-IB', 0, 2, 0],
[new Date('12/01/2016'), 'TERMINATE-COVERAGE', 3682, 5917, 0],
[new Date('12/01/2016'), 'ADD-CVG / CHG-SITE', 1101, 2433, 7887],
[new Date('12/01/2016'), 'day1--CREATE-IB', 36647, 0,1064]
]);
data.addRows([
[new Date('12/02/2016'), 'RE-LINK', 11649, 221, 1127],
[new Date('12/02/2016'), 'UPDATE-IB', 0, 4844, 79886],
[new Date('12/02/2016'), 'UPDATE-SA', 0, 2961, 7377],
[new Date('12/02/2016'), 'CREATE-IB/SA', 0, 3993, 13268],
[new Date('12/02/2016'), 'TERMINATE-IB', 4105, 0, 0],
[new Date('12/02/2016'), 'TERMINATE-COVERAGE', 1844, 10834, 0],
[new Date('12/02/2016'), 'ADD-CVG / CHG-SITE', 218, 717, 10498]
]);
data.addRows([
[new Date('12/03/2016'), 'RE-LINK', 3484, 3, 28],
[new Date('12/03/2016'), 'UPDATE-IB', 0, 139207, 238037],
[new Date('12/03/2016'), 'UPDATE-SA', 0, 3, 3],
[new Date('12/03/2016'), 'CREATE-IB/SA', 0, 4598, 12680],
[new Date('12/03/2016'), 'TERMINATE-COVERAGE', 480, 1210, 90],
[new Date('12/03/2016'), 'ADD-CVG / CHG-SITE', 1, 72, 2372]
]);
data.addRows([
[new Date('12/04/2016'), 'RE-LINK', 7142, 465, 1427],
[new Date('12/04/2016'), 'UPDATE-IB', 0, 105719, 216275],
[new Date('12/04/2016'), 'UPDATE-SA', 0, 14761, 31698],
[new Date('12/04/2016'), 'CREATE-IB/SA', 0, 5071, 14184],
[new Date('12/04/2016'), 'TERMINATE-IB', 18, 10, 0],
[new Date('12/04/2016'), 'TERMINATE-COVERAGE', 5265, 1280, 98],
[new Date('12/04/2016'), 'ADD-CVG / CHG-SITE', 1173, 12474, 15545]
]);
var view = new google.visualization.DataView(data);
view.hideColumns([0]);
var options = {
chartArea: {
height: 300,
left: 60,
top: 60
},
colors: ['#00ff00', '#ff0000','#ffe102'],
hAxis: {
title: '',
textStyle: {
color: '#01579b',
fontSize: 10,
fontName: 'Arial',
bold: true,
italic: true
},
titleTextStyle: {
color: '#01579b',
fontSize: 12,
fontName: 'Arial',
bold: false,
italic: true
},
slantedTextAngle: 90
},
height: 600,
legend: {
position: 'top'
},
title: 'Applications status biz process wise(4 Days)',
vAxis: {
title: '',
textStyle: {
color: '#1a237e',
fontSize: 12,
bold: true
},
titleTextStyle: {
color: '#1a237e',
fontSize: 12,
bold: true
}
},
width: 1600
};
var formatDate = new google.visualization.DateFormat({
pattern: 'dd-MMM-yy'
});
var container = document.getElementById('container');
var chart = new google.visualization.LineChart(container);
google.visualization.events.addListener(chart, 'ready', function () {
var rowIndex = -1;
var dateValue = null;
var svgParent = container.getElementsByTagName('svg')[0];
var labels = [];
Array.prototype.forEach.call(container.getElementsByTagName('text'), function(text) {
var groupLabel;
// find hAxis labels
if (text.hasAttribute('transform')) {
rowIndex++;
if (dateValue !== formatDate.formatValue(data.getValue(rowIndex, 0))) {
dateValue = formatDate.formatValue(data.getValue(rowIndex, 0));
groupLabel = text.cloneNode(true);
groupLabel.removeAttribute('transform');
groupLabel.removeAttribute('font-style');
groupLabel.setAttribute('fill', '#333333');
groupLabel.setAttribute('y', parseFloat(text.getAttribute('y')) + 132);
groupLabel.textContent = dateValue;
text.parentNode.appendChild(groupLabel);
if (labels.length > 0) {
setLabelX(labels[labels.length - 1], text, 0);
}
labels.push(groupLabel);
addGroupLine(groupLabel, -24, -144);
}
if (rowIndex === (data.getNumberOfRows() - 1)) {
if (labels.length > 0) {
setLabelX(labels[labels.length - 1], text, 16);
}
addGroupLine(text, 18, -12);
}
}
});
// center group label
function setLabelX(prevLabel, curLabel, xOffset) {
prevLabel.setAttribute('x',
parseFloat(prevLabel.getAttribute('x')) + xOffset +
((parseFloat(curLabel.getAttribute('x')) - parseFloat(prevLabel.getAttribute('x'))) / 2)
);
}
// add group line
function addGroupLine(text, xOffset, yOffset) {
var parent = container.getElementsByTagName('g')[0];
var groupLine = container.getElementsByTagName('rect')[0].cloneNode(true);
groupLine.setAttribute('x', parseFloat(text.getAttribute('x')) + xOffset);
groupLine.setAttribute('y', parseFloat(text.getAttribute('y')) + yOffset);
groupLine.setAttribute('width', '0.8');
groupLine.setAttribute('height', '188');
groupLine.setAttribute('stroke', '#333333');
groupLine.setAttribute('stroke-width', '1');
groupLine.setAttribute('fill', '#333333');
groupLine.setAttribute('fill-opacity', '1');
parent.appendChild(groupLine);
}
});
chart.draw(view, options);
}<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="container"></div>