谷歌在X轴上具有双标签的折线图 [英] google Line chart with double label on X axis
本文介绍了谷歌在X轴上具有双标签的折线图的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在研究谷歌折线图，并且我想在x轴上添加标签（日期明智的流程），我可以在没有日期的情况下绘制图表，但无法填充日期，
< html>
< head>
< title> Google图表教程< / title>
< script type =text / javascriptsrc =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>
\
函数drawChart（）{
//定义要绘制的图表。
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 ，
['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,393,313268]，
['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 - 补充报道和变更网站'，1,72,2372]
]）;
data.addRows（[
['RE-LINK'，7142，465，1427]，
['UPDATE-IB'，
['UPDATE-SA'，0,14761,31698]，
['CREATE-IB / SA'，0,5071,14184]，
[0,110719,216275] 'TERMINATE-IB'，18,10,0]，
['TERMINATE-COVERAGE'，5265,1280,98]，
['day4 - 补充报道和变更网站'，1173 ，12474,15545]
]）;
//设置图表选项
var options = {'title'：'应用程序状态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'}，
};
//实例化并绘制图表。
var chart = new google.visualization.LineChart（document.getElementById（'container'））;
chart.draw（data，options）;
}
google.charts.setOnLoadCallback（drawChart）;
< / script>
< / body>
< / html>
请大家帮忙....
来实现，如果您可以手动修改svg
当图表的'ready'事件触发时，添加分类标签和分组行
见下面的工作片段，这只是一个例子来显示可能性
几个假设是根据大小和位置图表...
google.charts.load（'current'，{回调：drawChart，包：['corechart']}） ;函数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' ，'01722,2728]，[新日期（'12 / 01/2016'），'UPDATE-SA'，0,43580,87713]，[新日期（'12 / 01/2016'），'CREATE- IB / SA'，0,18920,103690]，[新日期（'12 / 01/2016'），'TERMINATE-IB'，0,2,0]，[新日期（'12 / 01/2016'） ，'TERMINATE-COVERAGE'，3682,5917,0]，[新日期（'12 / 01/2016'），'ADD-CVG / CHG-SITE'，1101,2433,7887]，[新日期（'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]，[新日期（'12 / 02/2016'），'UPDATE-SA'，0,2961,7377]，[新日期（'12 / 02/2016'），'CREATE-IB /''，0,3393,13268]，[新日期（'12 / 02/2016'），'TERMINATE-IB'，4105,0,0]，[新日期（'12 / 02/2016'）， 'TERMINATE-COVERAGE'，1844,10834,0]，[新日期（'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]，[新日期（'12 / 03/2016'），'UPDATE-SA'，0,3,3]，[新日期（'12 / 03/2016'），'CREATE-IB /新'日期（'12 / 03/2016'），'终止 - 覆盖'，480,1210,90 'ADD-CVG / CHG-SITE'，1,72,2372]]）; data.addRows（[[新日期（'12 / 04/2016'），'RE-LINK'，7142,465,1427]，[新日期（'12 / 04/2016'），'UPDATE-IB'， 0,105719,216275]，[新日期（'12 / 04/2016'），'UPDATE-SA'，0,14761,31698]，[新日期（'12 / 04/2016'），'CREATE-IB /''，0,5071,14184]，[新日期（'12 / 04/2016'），'TERMINATE-IB'，18,10,0]，[新日期（'12 / 04/2016'）， 'TERMINATE-COVERAGE'，5265,1280,98]，[新日期（'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; //找到hAxis标签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）; }}}）; //中心组标签函数setLabelX（prevLabel，curLabel，xOffset）{prevLabel.setAttribute（'x'，parseFloat（prevLabel.getAttribute（'x'））+ xOffset +（（parseFloat（curLabel.getAttribute（'x'）） - parseFloat（prevLabel.getAttribute（'x'）））/ 2））; } //添加组行函数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>
I'm working on google line chart and I want to double label on x axis(date wise processes ), I'm able to draw chart without dates with below code but not able to populate dates,
<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>
please help on this....
解决方案
although the requested layout is not available via standard configuration options,
it is possible to achieve, if you're ok with modifying the svg manually
when the chart's 'ready' event fires, add the category labels and group lines
see following working snippet, which is just an example to show the possibility
several assumptions are made based on the size and placement of the chart...
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>
这篇关于谷歌在X轴上具有双标签的折线图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
