Google Charts сложены столбцы с различными аннотациями для каждого фрагмента столбца
Я надеюсь, что вы можете помочь мне с этим:
У меня есть диаграмма столбцов с накоплением, все они с двумя значениями, чтобы сложить в каждом столбце. Я успешно создал диаграмму, НО мне нужно добавить аннотацию для каждого фрагмента каждого столбца (я нене знаю его правильного названия) с указанием процента от общего числа, представленного в немсобственный столбец.
В приведенном ниже примере мне нужно было бы установить аннотации, чтобы в нем отображались столбцы с накоплением, а для первого столбца должна быть аннотация "Хорошо" площадь со значением60%» и еще одна аннотация для "Плохой" зона "40%», и так далее.
До сих пор мне удалось включить одну аннотацию, которая показывает процентное значение для "Плохой" площадь, которая плавает в верхней части каждого столбца. Мне нужна помощь, чтобы правильно определить аннотацию для каждой области столбца и, надеюсь, разместить ее по центру ».с данной области.
Спасибо заранее за вашу помощь.
TL; DR: мне нужны центрированные аннотации для каждого фрагмента каждого столбца.
google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Date', 'Good', 'Bad'],
[Date(2013, 11, 1), 3, 2],
[Date(2013, 11, 2), 5, 3],
[Date(2013, 11, 3), 9, 2],
[Date(2013, 11, 4), 6, 3]
]);
var view = new google.visualization.DataView(data);
view.setColumns([{
label: 'Date',
type: 'string',
calc: function (dt, row) {
var str = dt.getValue(row, 0);
return { v: str, f: str.toString('dd/MM/aaaa') };
}
}
, {
label: 'Good',
type: 'number',
calc: function (dt, row) {
var good = dt.getValue(row, 1);
var bad = dt.getValue(row, 2);
return { v: good / (good + bad), f: good.toString() };
}
}, {
label: 'Bad',
type: 'number',
calc: function (dt, row) {
var good = dt.getValue(row, 1);
var bad = dt.getValue(row, 2);
return { v: bad / (good + bad), f: bad.toString() };
}
},
{
role: 'annotation',
type: 'string',
calc: function (dt, row) {
var good = dt.getValue(row, 1);
var bad = dt.getValue(row, 2);
var perc = (bad / (good + bad)) * 100;
var ann = parseFloat(Math.round(perc).toFixed(2)) + "%";
return { v: ann, f: ann.toString() };
}
}]);
var options = {
title: 'Daily deeds',
isStacked: true,
vAxis: { format: '#.##%' }
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart'));
chart.draw(view, options);
}