javascript - data - haxis google chart

Anotación Google Chart API

Question

Estoy tratando de usar Google Chart API para construir un gráfico de Waterfall. Noté que las gráficas Candlestick / Waterfall no son compatibles con las anotaciones.

Vea esta muestra jsfiddle

google.charts.load(''current'', {''packages'':[''corechart'']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn(''string'', ''Category'');
data.addColumn(''number'', ''MinimumLevel'');
data.addColumn(''number'', ''MinimumLevel1'');
data.addColumn(''number'', ''MaximumLevel'');
data.addColumn(''number'', ''MaximumLevel1'');
data.addColumn({type: ''number'', role: ''tooltip''});
data.addColumn({type: ''string'', role: ''style''});
data.addColumn({type: ''number'', role: ''annotation''});
data.addRow([''Category 1'', 0 , 0, 5, 5, 5,''gray'',5]);
data.addRow([''Category 2'', 5 , 5, 10, 10, 10,''red'',10]);
data.addRow([''Category 3'', 10 , 10, 15, 15, 15,''blue'',15]);
data.addRow([''Category 4'', 15 , 15, 10, 10, 10,''yellow'',10]);
data.addRow([''Category 5'', 10 , 10, 5, 5, 5,''gray'',5]);
var options = {
legend: ''none'',
bar: { groupWidth: ''60%'' } // Remove space between bars.
};
var chart = new google.visualization.CandlestickChart(document.getElementById(''chart_div''));
chart.draw(data, options);
}

Me gustaría poner el valor de la quinta columna en la parte superior de cada candelabro. Debe tener un aspecto como este :

¿Hay alguna forma de hacer esto?

Gracias

Answer 1

simplemente sucede, me encontré con el mismo problema esta semana

así que agregué mis propias anotaciones, durante el evento ''animationfinish''

ver el siguiente fragmento de trabajo ...

google.charts.load(''current'', {
callback: drawChart,
packages:[''corechart'']
});
function drawChart() {
var dataChart = new google.visualization.DataTable({"cols":[{"label":"Category","type":"string"},{"label":"Bottom 1","type":"number"},{"label":"Bottom 2","type":"number"},{"label":"Top 1","type":"number"},{"label":"Top 2","type":"number"},{"role":"style","type":"string","p":{"role":"style"}}],"rows":[{"c":[{"v":"Budget"},{"v":0},{"v":0},{"v":22707893.613},{"v":22707893.613},{"v":"#007fff"}]},{"c":[{"v":"Contract Labor"},{"v":22707893.613},{"v":22707893.613},{"v":22534350.429},{"v":22534350.429},{"v":"#1e8449"}]},{"c":[{"v":"Contract Non Labor"},{"v":22534350.429},{"v":22534350.429},{"v":22930956.493},{"v":22930956.493},{"v":"#922b21"}]},{"c":[{"v":"Materials and Equipment"},{"v":22930956.493},{"v":22930956.493},{"v":22800059.612},{"v":22800059.612},{"v":"#1e8449"}]},{"c":[{"v":"Other"},{"v":22800059.612},{"v":22800059.612},{"v":21993391.103},{"v":21993391.103},{"v":"#1e8449"}]},{"c":[{"v":"Labor"},{"v":21993391.103},{"v":21993391.103},{"v":21546003.177999996},{"v":21546003.177999996},{"v":"#1e8449"}]},{"c":[{"v":"Travel"},{"v":21546003.177999996},{"v":21546003.177999996},{"v":21533258.930999994},{"v":21533258.930999994},{"v":"#1e8449"}]},{"c":[{"v":"Training"},{"v":21533258.930999994},{"v":21533258.930999994},{"v":21550964.529999994},{"v":21550964.529999994},{"v":"#922b21"}]},{"c":[{"v":"Actual"},{"v":0},{"v":0},{"v":21550964.52999999},{"v":21550964.52999999},{"v":"#007fff"}]}]});
var waterFallChart = new google.visualization.ChartWrapper({
chartType: ''CandlestickChart'',
containerId: ''chart_div'',
dataTable: dataChart,
options: {
animation: {
duration: 1500,
easing: ''inAndOut'',
startup: true
},
backgroundColor: ''transparent'',
bar: {
groupWidth: ''85%''
},
chartArea: {
backgroundColor: ''transparent'',
height: 210,
left: 60,
top: 24,
width: ''100%''
},
hAxis: {
slantedText: false,
textStyle: {
color: ''#616161'',
fontSize: 9
}
},
height: 272,
legend: ''none'',
tooltip: {
isHtml: true,
trigger: ''both''
},
vAxis: {
format: ''short'',
gridlines: {
count: -1
},
textStyle: {
color: ''#616161''
},
viewWindow: {
max: 24000000,
min: 16000000
}
},
width: ''100%''
}
});
google.visualization.events.addOneTimeListener(waterFallChart, ''ready'', function () {
google.visualization.events.addListener(waterFallChart.getChart(), ''animationfinish'', function () {
var annotation;
var chartLayout;
var container;
var numberFormatShort;
var positionY;
var positionX;
var rowBalance;
var rowBottom;
var rowFormattedValue;
var rowIndex;
var rowTop;
var rowValue;
var rowWidth;
container = document.getElementById(waterFallChart.getContainerId());
chartLayout = waterFallChart.getChart().getChartLayoutInterface();
numberFormatShort = new google.visualization.NumberFormat({
pattern: ''short''
});
rowIndex = 0;
Array.prototype.forEach.call(container.getElementsByTagName(''rect''), function(rect) {
switch (rect.getAttribute(''fill'')) {
// use colors to identify bars
case ''#922b21'':
case ''#1e8449'':
case ''#007fff'':
rowWidth = parseFloat(rect.getAttribute(''width''));
if (rowWidth > 2) {
rowBottom = waterFallChart.getDataTable().getValue(rowIndex, 1);
rowTop = waterFallChart.getDataTable().getValue(rowIndex, 3);
rowValue = rowTop - rowBottom;
rowBalance = Math.max(rowBottom, rowTop);
positionY = chartLayout.getYLocation(rowBalance) - 6;
positionX = parseFloat(rect.getAttribute(''x''));
rowFormattedValue = numberFormatShort.formatValue(rowValue);
if (rowValue < 0) {
rowFormattedValue = rowFormattedValue.replace(''-'', '''');
rowFormattedValue = ''('' + rowFormattedValue + '')'';
}
annotation = container.getElementsByTagName(''svg'')[0].appendChild(container.getElementsByTagName(''text'')[0].cloneNode(true));
$(annotation).text(rowFormattedValue);
annotation.setAttribute(''x'', (positionX + (rowWidth / 2)));
annotation.setAttribute(''y'', positionY);
annotation.setAttribute(''font-weight'', ''bold'');
rowIndex++;
}
break;
}
});
});
});
$(window).resize(function() {
waterFallChart.draw();
});
waterFallChart.draw();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>