1

A ideia é fazer com que o texto do annotation do tipo line fique sobre a coluna.

Já tentei criar uma outra annotation para a mesma coluna, mas não obtive sucesso.

JS:

    google.charts.load("current", {
    packages: ['corechart']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'x');
    data.addColumn({type: 'string', role: 'annotation'});
    data.addColumn('number', 'Faixas');
    data.addColumn({type: 'string', role: 'annotation'});
                data.addRow(["até 4", null, 0, '0']);
                    data.addRow(["4.5", null, 0, '0']);
                    data.addRow(["5", null, 0, '0']);
                    data.addRow(["5.5", null, 0, '0']);
                    data.addRow(["6", null, 0, '0']);
                    data.addRow(["6.5", null, 0, '0']);
                    data.addRow(["7", null, 1, '1']);
                    data.addRow(["7.5", null, 2, '2']);
                    data.addRow(["8", 'Você', 5, '5']);
                    data.addRow(["8.5", null, 6, '6']);
                    data.addRow(["9", null, 2, '2']);
                    data.addRow(["9.5", null, 0, '0']);
                    data.addRow(["10", null, 3, '3']);

    var view = new google.visualization.DataView(data);
    var chart = new google.visualization.ColumnChart(document.getElementById("grafico"));
    chart.draw(view, {
        legend: {position: 'bottom'},
        curveType: 'function',
        vAxis: {
            maxValue: 10,
            format: 0
        },
        annotation: {
            1: {
                style: 'line'
            }
        }
    });
    $(document).ready(function () {
        $(window).resize(function () {
            drawChart();
        });
    });
}

HTML:

<div id="grafico"></div>

RESULTADO ESPERADO:

][1]

0

2 Respostas 2

0

Você colocou a annotation na coluna errada. Substitua:

data.addColumn('string', 'x');
data.addColumn({type: 'string', role: 'annotation'});
data.addColumn('number', 'Faixas');
data.addColumn({type: 'string', role: 'annotation'});

por :

data.addColumn('string', 'x');
data.addColumn('number', 'Faixas');
data.addColumn({type: 'string', role: 'annotation'});

E nas linhas você monta da seguinte forma:

data.addRow(["valor eixo X", 0, 'annotation']);

Na primeira posição é o que vai estar no eixo x, a segunda o valor no eixo y e a terceira a annotation. Veja:

google.charts.load("current", {
  packages: ['corechart']
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'x');
  data.addColumn('number', 'Faixas');
  data.addColumn({type: 'string', role: 'annotation'});

  data.addRow(["até 4", 0, '0']);
  data.addRow(["4.5", 0, '0']);
  data.addRow(["5", 0, '0']);
  data.addRow(["5.5", 0, '0']);
  data.addRow(["6", 0, '0']);
  data.addRow(["6.5", 0, '0']);
  data.addRow(["7", 1, '1']);
  data.addRow(["7.5", 2, '2']);
  data.addRow(["8", 5, 'Você']);
  data.addRow(["8.5", 6, '6']);
  data.addRow(["9", 2, '2']);
  data.addRow(["9.5", 0, '0']);
  data.addRow(["10", 3, '3']);


  var view = new google.visualization.DataView(data);
  var chart = new google.visualization.ColumnChart(document.getElementById("grafico"));
  chart.draw(view, {
    legend: {
      position: 'bottom'
    },
    curveType: 'function',
    vAxis: {
      maxValue: 10,
      format: 0
    },
    annotation: {
      1: {
        style: 'line'
      }
    }
  });
  $(document).ready(function() {
    $(window).resize(function() {
      drawChart();
    });
  });
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="grafico"></div>

2
  • Talvez minha explicação tenha ficado confusa. A minha ideia é que, na coluna em que aparecerá o texto "você", também apareça o annotation com a quantidade. Ou seja, duas anotações pra mesma coluna, uma string e uma linha - e não sei se isso é possível -.
    – Cobra
    17/03/2017 às 18:52
  • @ThiagoBarros, eu não sei se isso é possível só com as funções do google charts. Talvez se você sobrescrever o SVG funcione. Você pode tentar trocar as annotations de lugar, veja: jsfiddle.net/7m7gbbsb/1 Só um detalhe, quando você usa style: 'line' nas annotations é para deixá-la na vertical. 20/03/2017 às 13:10
0

Preciso de ajuda, no meu caso, quando incluo, as barras do gráfico some, ficando apenas os rotulos.

//Criando as colunas dentro do array $table['cols'] = array(

array('label' => 'Data_Pedido', 'type' => 'string'), array('label' => 'Qtde', 'type' => 'number','role' => 'annotation') ); //echo $table; //Preenchendo as linhas do array auxiliar "$row" com os dados do banco while($row = mysqli_fetch_assoc($result)) {

$temp = array(); $temp[] = array('v' => (string) $row['Data_Pedido']); $temp[] = array('v' => (int) $row['Qtde']);

$rows[] = array('c' => $temp); }

2

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .