如何避免Google条形图中的条形上的标签重叠? [英] How to avoid overlapping label's on the Bar in google bar charts?
问题描述
我正在创建一个堆叠的条形图，需要在堆叠内部显示标签.但是几乎没有标签重叠.供参考图像
I'm creating a stacked bar graph and need to show the label inside the stack. But Few of the label's are getting overlapped. for reference image
您能帮我如何避免使用Google图表重叠吗?
Can you please help me how to avoid overlapping using google charts ?
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
<script type="text/javascript">
google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawStacked);
function drawStacked() {
var data = new google.visualization.arrayToDataTable([['Time Period','XYZ',{ role: 'annotation'},'ABC',{ role: 'annotation'},{ role: 'annotation'},'Average'],
['Aug', 3754,'3754', 2089,'2089','5,843',4000],
['Sept', 900,'900', 200,'200', '100',4000],
['Oct', 2000,'2000', 4900,'4900', '6000',4000],
['Nov', 1700,'1700', 2200,'2200', '3900',4000],
['Dec', 2400,'2400', 2089,'2200', '4600',4000]
]);
var options = {
title: 'Overview of the Tickets',
isStacked: true,
orientation: 'horizontal',
hAxis: {
title: 'Time Period',
annotations: {}
},
vAxis: {
title: 'Number of Tickets'
},
seriesType: 'bars',
series: {2: {type: 'line'}}
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
</html>
关于， 斯里坎特
推荐答案
首先，看来您的数据中还有一个额外的annotation列，
似乎不属于特定列
first, it appears you have an extra annotation column in your data,
that doesn't appear to belong to a specific column
是从上面的问题中复制的...
copied from question above...
var data = new google.visualization.arrayToDataTable([
[
'Time Period',
'XYZ',
{role: 'annotation'},
'ABC',
{role: 'annotation'},
{role: 'annotation'}, // <-- extra annotation?
'Average'
],
[
'Aug',
3754,
'3754',
2089,
'2089',
'5,843', // <-- extra annotation?
4000
],
...
]);
这可能是它如此混乱的原因的一部分
this could be part of the reason it's so cluttered
无论如何，请使用annotations 配置选项进行调整
regardless, use the annotations configuration option for adjustments
config选项可用于整个图表，或仅用于特定系列
the config option can be used for the entire chart, or just for a specific series
var options = {
// entire chart
annotations: {
textStyle: {
fontSize: 10
}
},
series: {
0: {
// series 0
annotations: {
stem: {
length: 0
},
},
},
1: {
// series 1
annotations: {
stem: {
length: 16
}
},
},
}
...
};
具体来说，您可以结合使用annotations.textStyle.fontSize和annotations.stem.length来防止重叠
specifically, you can use a combination of annotations.textStyle.fontSize and annotations.stem.length to prevent overlapping
请参阅以下工作片段...
see following working snippet...
annotations.textStyle.fontSize减小了
这样可以使第二列上的第一个注释适合条形图
annotations.textStyle.fontSize is reduced for the entire chart
this allows the first annotation on the second column to fit within the bar
annotations.stem.length设置为零(0)，
和16在第二个...
annotations.stem.length is set to zero (0) on the first series,
and 16 on the second...
(问题中多余的注释已删除)
(the extra annotation from the question has been removed)
google.charts.load('current', {
callback: drawStacked,
packages: ['corechart']
});
function drawStacked() {
var data = new google.visualization.arrayToDataTable([
['Time Period', 'XYZ', {role: 'annotation'}, 'ABC', {role: 'annotation'}, 'Average'],
['Aug', 3754, '3754', 2089, '2089', 4000],
['Sept', 900, '900', 200, '200', 4000],
['Oct', 2000, '2000', 4900, '4900', 4000],
['Nov', 1700, '1700', 2200, '2200', 4000],
['Dec', 2400, '2400', 2089, '2200', 4000]
]);
var options = {
annotations: {
textStyle: {
fontSize: 10
}
},
series: {
0: {
annotations: {
stem: {
length: 0
},
},
},
1: {
annotations: {
stem: {
length: 16
}
},
},
2: {
type: 'line'
}
},
hAxis: {
title: 'Time Period'
},
isStacked: true,
seriesType: 'bars',
title: 'Overview of the Tickets',
vAxis: {
title: 'Number of Tickets'
}
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
编辑
因为第三个注释需要作为其他两个堆栈的总和，
除了注释列
since the third annotation is needed as the total of the other two stacks,
recommend adding the series value for the total, in addition to the annotation column
，并将总系列类型设置为'line'
当然，这会将总注释置于其余注释之上
只要图表上有足够的空间在条形图上方显示注释
and setting the total series type to 'line'
this will place the total annotation above the rest, for sure
so long as there is enough room on the chart to display the annotation above the bars
为确保条形上方有足够的空间，请找到最大vAxis值，然后添加一个值，该值将为注释创建足够的空间
然后将该值设置为vAxis.viewWindow.max
to ensure enough room above bars, find the max vAxis value, and add a value that will create enough room for the annotation
then set that value as vAxis.viewWindow.max
您可以关闭直线和点，并在需要时从图例中隐藏整个系列
you can turn off the line and point, and hide the total series from the legend if needed
以我的经验，要使复杂的Google图表能够很好地显示，就需要进行大量的操作
in my experience, it takes quite a bit of manipulation to get a complex google chart to display nicely
请参阅以下工作片段，其中包含第三个总计"注释...
see the following working snippet, which incorporates the third, 'total', annotation...
google.charts.load('current', {
callback: drawStacked,
packages: ['corechart']
});
function drawStacked() {
var data = new google.visualization.arrayToDataTable([
['Time Period', 'XYZ', {role: 'annotation'}, 'ABC', {role: 'annotation'}, 'TOTAL', {role: 'annotation'}, 'Average'],
['Aug', 3754, '3,754', 2089, '2,089', 5843, '5,843', 4000],
['Sept', 900, '900', 200, '200', 1100, '1,100', 4000],
['Oct', 2000, '2,000', 4900, '4,900', 6900, '6,900', 4000],
['Nov', 1700, '1,700', 2200, '2,200', 3900, '3,900', 4000],
['Dec', 2400, '2,400', 2089, '2,089', 4489, '4,489', 4000]
]);
// find max for all columns to set top vAxis number
var maxVaxis = 0;
for (var i = 1; i < data.getNumberOfColumns(); i++) {
if (data.getColumnType(i) === 'number') {
maxVaxis = Math.max(maxVaxis, data.getColumnRange(i).max);
}
}
var options = {
annotations: {
textStyle: {
fontSize: 10
}
},
series: {
0: {
annotations: {
stem: {
length: 0
},
}
},
1: {
annotations: {
stem: {
length: 2
}
}
},
2: {
annotations: {
stem: {
color: 'transparent',
length: 16
}
},
color: 'black',
lineWidth: 0,
pointShape: 'square',
pointSize: 0,
type: 'line',
visibleInLegend: false
},
3: {
type: 'line'
}
},
hAxis: {
title: 'Time Period'
},
isStacked: true,
seriesType: 'bars',
title: 'Overview of the Tickets',
vAxis: {
title: 'Number of Tickets',
viewWindow: {
max: maxVaxis + 2000
}
}
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
这篇关于如何避免Google条形图中的条形上的标签重叠?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
