谷歌可视化堆叠条形图中的标签值和总计 [英] Label Values and Total in Google Visualization Stacked Bar Chart
问题描述
我试图在堆积条形图中显示每个条形的值，然后显示所有条形的总值 问题是，我得到最后一个条形的值和条形外的总数.如果我不显示总数，我会得到条形图内的值.使用最后两个注释下方的代码在第二个条形之外，即使第二个条形足够长以显示其标签.
I am trying to display the value of each bar and then the total value of all bars in a stacked bar chart The problem is, I get the last bar's value and the total both outside the bar. If I do not show the total, I get the value inside the bar. Using the code below the the last two annotations are outside the second bar even when the second bar is long enough to show its label.
<html>
<head>
<base target="_top">
</head>
<body>
<h3>Registrations</h3>
<div id="registrations_chart"></div>
</body>
</html>
<script>
google.charts.load('current', {'packages':['corechart', 'bar', 'gauge', 'table']});
google.charts.setOnLoadCallback(drawStackedBar);
function drawStackedBar() {
var myHeight = 350;
var data = new google.visualization.DataTable();
data.addColumn('string', 'Registrations');
data.addColumn('number', 'Regular');
data.addColumn('number', 'Work Study');
data.addRows([
['Adult', 20, 12],
['Teen', 3, 0]
]);
var view = new google.visualization.DataView(data);
view.setColumns([0,
1, {
calc: function (dt, row) {
return dt.getValue(row, 1);
},
type: "number",
role: "annotation"
},
2, {
calc: function (dt, row) {
return dt.getValue(row, 2);
},
type: "number",
role: "annotation"
},
// series 1
{
calc: function (dt, row) {
return dt.getValue(row, 1) + dt.getValue(row, 2);
},
type: "number",
role: "annotation"
}
]);
var options = {
animation:{
duration: 1000,
easing: 'out',
startup: true
},
title: 'Registrations',
backgroundColor: 'transparent',
height: myHeight, width: 500,
legend: {
position: 'top',
maxLines: 3
},
bar: { groupWidth: '75%' },
isStacked: true
};
var chart = new google.visualization.BarChart(document.getElementById('registrations_chart'));
chart.draw(view, options);
}
</script>
如果我删除了 setColumns 中的最后一个选项，使该部分内容如下:
If I removed the last option in the setColumns to make that section read as follows:
view.setColumns([0,
1, {
calc: function (dt, row) {
return dt.getValue(row, 1);
},
type: "number",
role: "annotation"
},
2, {
calc: function (dt, row) {
return dt.getValue(row, 2);
},
type: "number",
role: "annotation"
},
// series 1
{
calc: function (dt, row) {
return dt.getValue(row, 1) + dt.getValue(row, 2);
},
type: "number",
role: "annotation"
}
]);
我在没有总计的情况下得到了我想要的标签，如下所示
I get the labels where I want them without the Total, as shown below
我所追求的是将总计添加到末尾，并将标签始终添加到内部，如下所示:
What I am after is to add the Total to the end and the Labels consistently inside as shown below:
我尝试了太多方法无法记住或在此列出，但最终没有得到总数.我怎样才能让最后一个标签出现并在其他标签适合时将它们保留在酒吧内?请注意，我使红色条比蓝色条长，并且数字仍然如图所示显示.
I have tried too many methods to remember or list here, but am not getting the Total at the end. How can I get this last Label to appear and keep the others inside the bar when they will fit there? Note that I have made the red bar longer than the blue one and the numbers still displayed as shown.
推荐答案
您可以为总数添加另一个系列列
you could add another series column for the total
然后使用以下选项将其从图表中隐藏...
then hide it from the chart with the following options...
enableInteractivity: false,
tooltip: "none",
visibleInLegend: false
这将允许来自其他值的注释正常执行
this will allow the annotations from the other values to perform normally
总注释会一直显示在外面，
但需要调整一些选项以防止它覆盖其他选项...
the total annotation will always show outside,
but need to adjust a few options to keep it from overwriting others...
annotations: {
stem: {
color: "transparent",
length: 28
},
textStyle: {
color: "#000000",
}
},
请参阅以下工作片段...
see following working snippet...
google.charts.load('50', {
packages:['corechart']
}).then(function () {
var myHeight = 350;
var data = new google.visualization.DataTable();
data.addColumn('string', 'Registrations');
data.addColumn('number', 'Regular');
data.addColumn('number', 'Work Study');
data.addRows([
['Adult', 20, 12],
['Teen', 3, 0]
]);
var view = new google.visualization.DataView(data);
view.setColumns([0,
1, {
calc: function (dt, row) {
return dt.getValue(row, 1);
},
type: "number",
role: "annotation"
},
2, {
calc: function (dt, row) {
return dt.getValue(row, 2);
},
type: "number",
role: "annotation"
},
{
calc: function (dt, row) {
return 0;
},
label: "Total",
type: "number",
},
{
calc: function (dt, row) {
return dt.getValue(row, 1) + dt.getValue(row, 2);
},
type: "number",
role: "annotation"
}
]);
var options = {
animation:{
duration: 1000,
easing: 'out',
startup: true
},
title: 'Registrations',
backgroundColor: 'transparent',
height: myHeight, width: 500,
legend: {
position: 'top',
maxLines: 3
},
bar: { groupWidth: '75%' },
isStacked: true,
series: {
2: {
annotations: {
stem: {
color: "transparent",
length: 28
},
textStyle: {
color: "#000000",
}
},
enableInteractivity: false,
tooltip: "none",
visibleInLegend: false
}
}
};
var chart = new google.visualization.BarChart(document.getElementById('registrations_chart'));
chart.draw(view, options);
});<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="registrations_chart"></div>编辑
注释位置没有标准选项
但是您可以手动移动它们，一旦图表的 'ready' 事件触发
或者在这种情况下，'animationfinish' 事件
there are no standard options for annotation position
but you can move them manually, once the chart's 'ready' event fires
or in this case, the 'animationfinish' event
请参阅以下工作片段，
总注释下移...
see following working snippet,
the total annotations are moved down...
google.charts.load('50', {
packages:['corechart']
}).then(function () {
var myHeight = 350;
var data = new google.visualization.DataTable();
data.addColumn('string', 'Registrations');
data.addColumn('number', 'Regular');
data.addColumn('number', 'Work Study');
data.addRows([
['Adult', 20, 12],
['Teen', 3, 0]
]);
var view = new google.visualization.DataView(data);
view.setColumns([0,
1, {
calc: function (dt, row) {
return dt.getValue(row, 1);
},
type: "number",
role: "annotation"
},
2, {
calc: function (dt, row) {
return dt.getValue(row, 2);
},
type: "number",
role: "annotation"
},
{
calc: function (dt, row) {
return 0;
},
label: "Total",
type: "number",
},
{
calc: function (dt, row) {
return dt.getValue(row, 1) + dt.getValue(row, 2);
},
type: "number",
role: "annotation"
}
]);
var options = {
animation:{
duration: 1000,
easing: 'out',
startup: true
},
title: 'Registrations',
backgroundColor: 'transparent',
height: myHeight, width: 500,
legend: {
position: 'top',
maxLines: 3
},
bar: { groupWidth: '75%' },
isStacked: true,
series: {
2: {
annotations: {
stem: {
color: "transparent",
},
textStyle: {
color: "#000000",
}
},
enableInteractivity: false,
tooltip: "none",
visibleInLegend: false
}
}
};
var chart = new google.visualization.BarChart(document.getElementById('registrations_chart'));
google.visualization.events.addListener(chart, 'animationfinish', function () {
$('#registrations_chart text[fill="#000000"]').each(function (index, annotation) {
if (!isNaN(parseFloat(annotation.textContent))) {
var yCoord = parseFloat($(annotation).attr('y'));
$(annotation).attr('y', yCoord + 18);
}
});
});
chart.draw(view, options);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="registrations_chart"></div>这篇关于谷歌可视化堆叠条形图中的标签值和总计的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
