Annotation Google Chart API

Question

Ich versuche Google Chart API zum Erstellen eines Wasserfalldiagramms zu verwenden. Mir ist aufgefallen, dass Candlestick/Waterfall Charts die Annotationen nicht unterstützen.

See this jsfiddle sample

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); 
    } 

Ich möchte den Wert der 5. Spalte an der Spitze eines jeden Leuchter setzen. Es sollte so aussehen:

Gibt es eine Möglichkeit, dies zu tun?

Dank

Answer 1

passiert einfach so, ich in das gleiche Problem lief diese Woche

so dass ich meine eigenen Anmerkungen hinzugefügt, während der 'animationfinish' Ereignis

folgenden Arbeits Schnipsel sehen ...

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>