Я использую столбчатую диаграмму Google Chart. Диаграмма представляет собой столбчатую диаграмму с накоплением с примечаниями для каждой точки данных сложенного столбца. Аннотации находятся в верхней части внутренней части панели, но я бы хотел, чтобы они располагались по центру внутри панели. Ближайшим решением, которое я нашел, было перемещение аннотации диаграммы Google без накопления столбцов в нижнюю часть здесь.
Проблема с этим решением заключается в том, что код ищет аннотации белого цвета и перемещает их вниз. График, над которым я работаю, имеет несколько цветов для аннотаций, и все аннотации этого цвета перемещаются вверх по сравнению с центром подмножества сложенного столбца.
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Range', 'score range A',{role: 'style'},{ role: 'annotation' }, 'score range B',{role: 'style'},{ role: 'annotation' }, 'score range C', {role: 'style'},{ role: 'annotation' },'score range D', {role: 'style'},{ role: 'annotation' }],
['Range', 4,'#D7F0B4','0-4',6,'#00B050','5-10',9,'#92D050','11-19',6, '#AAE182','20-25']
]);
var options = {
vAxis:{ ticks: [0,4,10,19], viewWindow: { max: 25} },
isStacked: true,
title: 'Score',
legend: {position: 'none'}
};
var chart = new google.visualization.ColumnChart(document.getElementById('idealchartA'));
chart.draw(data, options);
}
@Whitehat решил вышеуказанную проблему, но когда я использую другой столбец с некоторыми значениями аннотации как null, позиционирование сбрасывается.
вот новая серия данных, которую я пытался добавить
['Range', 4,'#D7F0B4','0-4',6,'#00B050','5-10',9,'#92D050','11-19',6, '#AAE182','20-25'], ['Yours', 4,'white; fill-opacity: 0',null,6, '#00B050',10, 9,'white; fill-opacity: 0',null,6,'white; fill-opacity: 0',null]
.
Идея состоит в том, чтобы иметь график, подобный приложенному изображению ниже, но с аннотациями по центру.
аналогично другому вопросу, просто нужен способ найти аннотации.
здесь мы используем атрибут text-anchor
, предполагая, что это не метка оси x.
тогда мы можем использовать метод диаграммы getChartLayoutInterface
для расчета новой позиции.
см. следующий рабочий фрагмент ...
google.charts.load('current', {
packages:['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['Range', 'score range A',{role: 'style'},{ role: 'annotation' }, 'score range B',{role: 'style'},{ role: 'annotation' }, 'score range C', {role: 'style'},{ role: 'annotation' },'score range D', {role: 'style'},{ role: 'annotation' }],
['Range', 4,'#D7F0B4','0-4',6,'#00B050','5-10',9,'#92D050','11-19',6, '#AAE182','20-25']
]);
var options = {
vAxis:{ ticks: [0,4,10,19], viewWindow: { max: 25} },
isStacked: true,
title: 'Score',
legend: {position: 'none'}
};
var container = document.getElementById('idealchartA');
var chart = new google.visualization.ColumnChart(container);
google.visualization.events.addListener(chart, 'ready', function () {
var observer = new MutationObserver(moveAnnotations);
observer.observe(container, {
childList: true,
subtree: true
});
});
function moveAnnotations() {
var chartLayout = chart.getChartLayoutInterface();
var barBounds;
var labelBounds;
var yAdj;
var labels = container.getElementsByTagName('text');
var index = 0;
Array.prototype.forEach.call(labels, function(label) {
if ((label.getAttribute('text-anchor') === 'middle') && (label.textContent !== data.getValue(0, 0))) {
barBounds = chartLayout.getBoundingBox('bar#' + index + '#0');
labelBounds = chartLayout.getBoundingBox('annotationtext#' + index + '#0#0');
yAdj = (barBounds.height / 2) + (parseFloat(label.getAttribute('font-size')) / 2) - 2;
label.setAttribute('y', barBounds.top + yAdj);
index++;
}
});
}
chart.draw(data, options);
});
<script src = "https://www.gstatic.com/charts/loader.js"></script>
<div id = "idealchartA"></div>
Я добавил новый составной столбец с нулевыми значениями в качестве аннотации, но это отключило javascript, потому что он может вычислить расстояние для нулевого значения. ['Диапазон', 4, '# D7F0B4', '0-4', 6, '# 00B050', '5-10', 9, '# 92D050', '11-19', 6, '# AAE182' , '20-25 '], [' Твой ', 4,' белый; непрозрачность заливки: 0 ', ноль, 6,' # 00B050 ', 10, 9,' белый; непрозрачность заливки: 0 ', ноль, 6,' белый; fill-opacity: 0 ', ноль]