如何解决在ng2-google-chart中的列之外垂直显示Axes文本
我使用的是 ng2-google-charts - 4.0.0 版本。我想在列旁边显示 hAxis 文本。 我尝试使用 slantedText 和 slantedTextAngle 但是,它不支持图表内部。 要是有人能帮忙就好了。
解决方法
获取图表内 x 轴标签的唯一方法是使用以下选项。
theme: 'maximized'
但是,此选项将忽略 slantedText
选项。
另一种隐藏x轴标签的方法,
并使用线型注释。
这将在栏内添加一个旋转的标签。
我们可以使实际的注释线透明。
请参阅以下工作片段...
google.charts.load('current',{
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['x',{role: 'annotation',type: 'string'},'y'],['Alarms','Alarms',100],['Admin State','Admin State',['Opr. State','Opr. State',100]
]);
var options = {
annotations: {
style: 'line',stem: {
color: 'transparent',length: 0
}
},hAxis: {
textPosition: 'none'
},isStacked: 'percent',legend: 'none'
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart'));
chart.draw(data,options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>
注意:没有对齐注释的选项。
如果我们希望标签向右移动,
您可以尝试使用以下选项减小栏的大小。
bar: {
groupWidth: 20
},
或者我们可以手动移动图表就绪事件上的标签。
请参阅以下工作片段...
google.charts.load('current',bar: {
groupWidth: 20
},legend: 'none'
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart'));
google.visualization.events.addListener(chart,'ready',function () {
var chartLayout = chart.getChartLayoutInterface();
var chartBounds = chartLayout.getChartAreaBoundingBox();
var labels = chart.getContainer().getElementsByTagName('text');
Array.prototype.forEach.call(labels,function(label) {
var labelBounds = label.getBBox();
if (label.getAttribute('text-anchor') === 'middle') {
label.setAttribute('text-anchor','start');
label.setAttribute('x',parseFloat(label.getAttribute('x')) - chartBounds.top - labelBounds.height);
label.setAttribute('y',parseFloat(label.getAttribute('y')) + labelBounds.height);
}
});
});
chart.draw(data,options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>
注意:这将在angular下工作,只需要添加ready事件,angular方式。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。