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>