如何避免谷歌条形图中酒吧标签的重叠？
如何避免谷歌条形图中酒吧标签的重叠？
提问于 2016-09-29 12:58:01
我正在创建一个堆叠的条形图，需要在堆栈中显示标签。但是标签中很少有重叠的。供参考图像
你能帮我如何避免重叠使用谷歌图表吗？
<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>
你好，斯里坎斯
回答 2
Stack Overflow用户
回答已采纳
发布于 2016-09-29 13:33:09
首先，数据中似乎有一个额外的annotation列，
似乎不属于特定列
从上面的问题复制过来..。
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
],
...
]);这可能是它如此混乱的原因之一
无论如何，使用annotations 配置选项进行调整。
配置选项可以用于整个图表，也可以仅用于特定的系列。
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的组合来防止重叠。
看下面的工作片段..。
减少了整个图表的annotations.textStyle.fontSize
这允许第二列上的第一个注释适合于条形图。
第一个系列的annotations.stem.length设置为零(0)，
16在第二个.
(问题中的额外注释已被删除)
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>
编辑
由于第三个注释需要作为其他两个堆栈的总和，
建议除注释列外，还应添加总计的系列值。
并将整个系列类型设置为'line'。
这将将整个注释放在其他注释之上，这是肯定的。
只要图表上有足够的空间显示条形图上的注释
要确保在条形图上有足够的空间，请找到最大的vAxis值，并添加一个为注释创建足够空间的值。
然后将该值设置为vAxis.viewWindow.max
您可以关闭线和点，并隐藏整个系列从图例，如果需要。
根据我的经验，要使复杂的google图表很好地显示，需要进行相当多的操作。
请参阅下面的工作片段，其中包含了第三个，“总计”，注释.
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>
Stack Overflow用户
发布于 2016-11-15 11:47:27
我认为这是因为没有足够的垂直空间的标签。
试试这个：
- 保存图的最高值(让我们称之为maxNumber)
- 在“选项”中，将vAxis maxValue设置为maxNumber +多一点。
我的图表中有4条水平线，所以我写道：
var options = {
title: chartTitle,
....... //Your options
vAxis: {
//Add more space in order to make sure the annotations are not overlapping
maxValue: maxNumber + maxNumber/4,
},页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39771018
复制相关文章
相似问题
腾讯云开发者
