Отлично! Спасибо @WhiteHat
ьзуя приведенный ниже пример, можно ли перемещать аннотации, чтобы они все отображались в одной и той же (статической) позиции внизу графика при использованииstyle: 'line'
(что заставляет аннотации читать вертикально)?
google.charts.load('current', {
callback: function () {
drawChart();
window.addEventListener('resize', drawChart, false);
},
packages:['corechart']
});
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Type', 'Completed', 'Outstanding'],
['', 75, 25],
['', 50, 40],
['', 80, 15]
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1,
{
calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation"
},
2,
{
calc: "stringify",
sourceColumn: 2,
type: "string",
role: "annotation"
}]);
var options = {
legend: 'none',
height: 270,
chartArea: { 'width': '80%', 'height': '80%' },
bar: { groupWidth: '80%' },
annotations: {
style: 'line',
textStyle: {
fontSize: 8,
color: 'black',
strokeSize: 0,
auraColor: 'transparent'
},
alwaysOutside: true,
stem:{
color: 'transparent',
},
},
vAxis: {
textPosition: 'none',
gridlines: {
color: 'transparent'
}
},
series: {
0: { color: '#00A887' },
1: { color: '#F6323E' },
}
};
var container = document.getElementById('northPMChart');
var chart = new google.visualization.ColumnChart(container);
// move annotations
var observer = new MutationObserver(function () {
Array.prototype.forEach.call(container.getElementsByTagName('text'), function(annotation) {
if ((annotation.getAttribute('text-anchor') === 'middle') &&
(annotation.getAttribute('fill') === '#ffffff')) {
var chartLayout = chart.getChartLayoutInterface();
annotation.setAttribute('y',
chartLayout.getYLocation(0) - (parseInt(annotation.getAttribute('font-size')) / 2)
);
}
});
});
observer.observe(container, {
childList: true,
subtree: true
});
chart.draw(view, options);
}
Вот пример JSFiddle:http://jsfiddle.net/tVCv9/340/
Это то, что я пытаюсь достичь: