google X 轴上带有双标签的折线图
问题描述 投票：0回答：2
我正在研究谷歌折线图，我想在 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>
请帮忙....
2个回答
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>-1
投票
投票
有没有办法在 react-google-charts 中实现这一点？
最新问题
- Glide：将本地SVG文件加载到ImageView中
- React-Vite React-Bootstrap 构建过程问题
- 全局 CORS 配置不起作用 - 无效的 CORS 请求
- 结合使用通配符和词干提取
- 为什么我会“！！禁用！！”来自 ipyvuetify 中的文本字段？
- 如何在选定的显示中打开网址。 IE。启动时 Firefox 在显示器 0 上显示，第二个 Firefox 在显示器 1 上显示？
- Flutter Native Splash Screen 包导致应用程序无法在 Android 模拟器中运行
- Gekko 求解器错误“未找到'results.json'”，并且无法查明原因
- IntellJ IDEA --> 系统找不到路径
- postgres jdbc 连接字符串与 ssl 证书（不带密钥库）
- 容器不健康。启动项目时遇到错误
- 在管道中对目标进行标签编码
- 使用 Trino 客户端进行外部身份验证而不是 BasicAuth
- 如何在 Bootstrap v5 中使用 javascript 编辑模态 data-bs-keyboard 属性？
- 返回超过16384字节的列
- 将 cuML 安装到 Colab 或 Kaggle 笔记本中
- 从 CSV 批量更新 Active Directory 扩展属性
- 如何检查JSON对象数组是否包含数组中定义的值？
- 传单圆形标记不符合我的色彩系数调色板？
- Flutter 可滑动：如何通过点击打开操作面板并同时关闭其他操作面板
© www.soinside.com 2019 - 2024. All rights reserved.