使用Google Chart API强制注释出现在堆叠的条形图中 [英] Annotation forcing to appear inside stacked bar charts using Google Chart API
本文介绍了使用Google Chart API强制注释出现在堆叠的条形图中的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个堆积的条形图，需要在条形图内注释条形图.
I have a stacked bar chart where I need to annotate the bars inside the bars.
我成功地注释了条形，但是那是在外面出现的.
I am successful in annotating of the bars but thats appearing outside.
如何用对比色强制注释在栏中.我也使用了此类，但不幸的是没有 annotations.alwaysOutside
How do I force the annotations inside the bar with contrasting color. I used this class too but unfortunately no annotations.alwaysOutside
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {
packages: ["corechart"]
});
google.charts.setOnLoadCallback(drawChart);
var bar_chart_data = [
["Material", "Cost", "Profit", {
"role": "style"
}, {
"role": "style"
}],
["A", 235.53, 117.765, "color: blue", "color: red"],
["B", 35.28, 14.8176, "color: blue", "color: red"],
["C", 495, 207.9, "color: blue", "color: red"],
["D", 44.52, 18.6984, "color: blue", "color: red"],
["E", 69.56, 29.2152, "color: blue", "color: red"],
["F", 4.5, 1.89, "color: blue", "color: red"],
["G", 16.62, 6.9804, "color: blue", "color: red"],
["H", 74.88, 31.449599999999997, "color: blue", "color: red"],
["I", 21.2, 8.904, "color: blue", "color: red"],
["J", 4.8, 2.016, "color: blue", "color: red"],
["K", 400, 168, "color: blue", "color: red"],
["L", 4.88, 2.0496, "color: blue", "color: red"],
["M", 45, 18.9, "color: blue", "color: red"],
["N", 0, 0, "color: blue", "color: red"],
["O", 9, 3.78, "color: blue", "color: red"],
["P", 4, 1.68, "color: blue", "color: red"],
["Q", 4.16, 1.7472, "color: blue", "color: red"]
]
function drawChart() {
var data = google.visualization.arrayToDataTable(bar_chart_data);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation"
}, 3, // <-- include style column
2, {
calc: "stringify",
sourceColumn: 2,
type: "string",
role: "annotation"
}, 4 // <-- include style column
]);
var options = {
title: "Live individual material cost break-up (%)",
width: 600,
height: 400,
bar: {
groupWidth: "95%"
},
legend: {
position: "none"
},
isStacked: 'percent',
hAxis: {
textStyle: {
fontSize: 8,
fontName: 'Muli',
bold: false,
},
},
vAxis: {
textStyle: {
fontSize: 10,
bold: false
},
},
};
var chart = new google.visualization.BarChart(document.getElementById("material_bar_chart"));
chart.draw(view, options);
}
</script>
<style>
.ignore-css{all:unset;}
</style>
</head>
<body>
<div class="ignore-css" id="material_bar_chart" style="width: 900px; height: 500px;"></div>
</body>
</html>
推荐答案
您已经注意到，始终在内部"没有选项.
并且该图表通常默认情况下会在其中放置注释，
只要有足够的空间
as you noted, there is not an option for "always inside".
and the chart will normally place annotations inside by default,
so long as there is enough room.
在这种情况下，我相信它们没有出现在内部的原因，
是因为字体太大.
in this case, I believe the reason they do not appear inside,
is because the font is too big.
由于字体已在轴上缩小，
减少注释的字体，
允许将它们绘制在条形图内.
since the font has been reduced on the axis,
reducing the font of the annotations,
allows them to be drawn inside the bars.
annotations: {
textStyle: {
fontSize: 8,
fontName: 'Muli',
bold: false,
},
},
请参阅以下工作片段...
see following working snippet...
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {
packages: ["corechart"]
});
google.charts.setOnLoadCallback(drawChart);
var bar_chart_data = [
["Material", "Cost", "Profit", {
"role": "style"
}, {
"role": "style"
}],
["A", 235.53, 117.765, "color: blue", "color: red"],
["B", 35.28, 14.8176, "color: blue", "color: red"],
["C", 495, 207.9, "color: blue", "color: red"],
["D", 44.52, 18.6984, "color: blue", "color: red"],
["E", 69.56, 29.2152, "color: blue", "color: red"],
["F", 4.5, 1.89, "color: blue", "color: red"],
["G", 16.62, 6.9804, "color: blue", "color: red"],
["H", 74.88, 31.449599999999997, "color: blue", "color: red"],
["I", 21.2, 8.904, "color: blue", "color: red"],
["J", 4.8, 2.016, "color: blue", "color: red"],
["K", 400, 168, "color: blue", "color: red"],
["L", 4.88, 2.0496, "color: blue", "color: red"],
["M", 45, 18.9, "color: blue", "color: red"],
["N", 0, 0, "color: blue", "color: red"],
["O", 9, 3.78, "color: blue", "color: red"],
["P", 4, 1.68, "color: blue", "color: red"],
["Q", 4.16, 1.7472, "color: blue", "color: red"]
]
function drawChart() {
var data = google.visualization.arrayToDataTable(bar_chart_data);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation"
}, 3, // <-- include style column
2, {
calc: "stringify",
sourceColumn: 2,
type: "string",
role: "annotation"
}, 4 // <-- include style column
]);
var options = {
title: "Live individual material cost break-up (%)",
width: 600,
height: 400,
bar: {
groupWidth: "95%"
},
legend: {
position: "none"
},
isStacked: 'percent',
annotations: {
textStyle: {
fontSize: 8,
fontName: 'Muli',
bold: false,
},
},
hAxis: {
textStyle: {
fontSize: 8,
fontName: 'Muli',
bold: false,
},
},
vAxis: {
textStyle: {
fontSize: 10,
bold: false
},
},
};
var chart = new google.visualization.BarChart(document.getElementById("material_bar_chart"));
chart.draw(view, options);
}
</script>
<style>
.ignore-css{all:unset;}
</style>
</head>
<body>
<div class="ignore-css" id="material_bar_chart" style="width: 900px; height: 500px;"></div>
</body>
</html>
这篇关于使用Google Chart API强制注释出现在堆叠的条形图中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
