问题
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.
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>回答1:
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>来源：https://stackoverflow.com/questions/60358751/annotation-forcing-to-appear-inside-stacked-bar-charts-using-google-chart-api