我有一个柱形图，如下所示。问题是注释Growth Target (41)与条重叠。
我需要以下内容。我该怎么做？我已将chartArea的宽度减小到80％，以便在其右侧创建一些空白，但是不要在此处移动注释并将其分成两行。
Google ColumnChart-如何将注释文本水平移动到图表区域之外并防止重叠
•
问答
yxfwade3 回答：Google ColumnChart-如何将注释文本水平移动到图表区域之外并防止重叠
对于注释放置，没有很棒的解决方案。
但是我们可以在数据表中添加一个空白行，以便为右侧的注释添加空间。
['Oct-19',65,'65',null,41,null],['Nov-19','#388e3c',['Dec-19',['','Growth Target: (41)'] // <-- add blank row
但是，这仅在图表的整体大小足够大时才起作用。
关于将列放在最前面，
我们将需要在图表的'ready'事件中手动修改图表。
我们可以添加一个<use>元素。基本上，我们为每个列分配一个ID。
然后将该列链接到<use>元素。
这将导致该列位于顶部。
但是它也会导致注释和工具提示出现问题。
而且我还没有时间弄清楚为什么。
请参阅以下工作摘要...
（当您运行代码段时，请点击代码段框顶部的整页链接）
google.charts.load('current',{
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['x','y',{role: 'annotation',type: 'string'},{role: 'style','target',type: 'string'}],['Apr-19',28,'28',['May-19',29,'29',['Jun-19',22,'22',['Jul-19',36,'36',['Aug-19',40,'40',['Sep-19',37,'37',['Oct-19','Growth Target: (41)']
]);
var container = document.getElementById('chart');
var chart = new google.visualization.ComboChart(container);
var options = {
colors: ['#bdbdbd','#757575'],hAxis: {
title: 'MONTH'
},height: 400,legend: 'none',series: {
1: {
annotations: {
stem: {
color: 'transparent'
},textStyle: {
color: '#757575'
}
},type: 'line'
}
},seriesType: 'bars',vAxis: {
title: 'SALES UNITS'
}
};
google.visualization.events.addListener(chart,'ready',function () {
// get svg namespace
var svg = container.getElementsByTagName('svg')[0];
var svgNS = svg.namespaceURI;
var rects = container.getElementsByTagName('rect');
Array.prototype.forEach.call(rects,function(rect,index) {
if ((rect.getAttribute('fill') === '#bdbdbd') || (rect.getAttribute('fill') === '#388e3c')) {
rect.setAttribute('id','rect-' + index);
var link = document.createElementNS(svgNS,'use');
link.setAttribute('href','#rect-' + index);
svg.appendChild(link);
}
});
});
chart.draw(data,options);
window.addEventListener('resize',function () {
chart.draw(data,options);
});
});<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>