3

Gostaria de adicionar linhas verticais nesse gráfico. Mas não estou conseguindo. Gostaria que cada grupo traçasse uma linha vertical, como nesta imagem.

inserir a descrição da imagem aqui

Meu código atual:

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

function drawChart() {
    var data = google.visualization.arrayToDataTable([
        ['Pergunta', 'Valor 1', 'Valor 2'],
        ['Pergunta 1', 2, 3],
        ['Pergunta 2', 4, 1],
        ['Pergunta 3', 1, 1]
    ]);

    var options = {
        title: '2016',
        subtitle: 'Resultados',
        legend: 'none',
        height: 600,
        pointSize: 3,
        vAxis: {title: "Status", ticks: [{v: 1, f: "Ótimo"}, {v: 2, f: "Bom"}, {v: 3, f: "Regular"}, {v: 4, f: "Ruim"}]

        }
    };

    var chart = new google.visualization.LineChart(document.getElementById('grafico'));

    chart.draw(data, options);
}

Renderizado:

inserir a descrição da imagem aqui

Gostaria que ficasse assim:

inserir a descrição da imagem aqui

Reparem nas linhas verticais em cada "Pergunta do eixo X".

3
  • Não entendi o que você quer fazer, você pretende fazer um gráfico igual a primeira imagem? Commented 8/11/2016 às 11:50
  • 1
    Você entende que no gráfico de cima aquela parte mais quebradiça são de fato dados, mas que não aparecem na legenda? Seriam dados que estão na faixa de 10 e 50. No seu caso como seria esta faixa? (digamos entre o bom e regular, "regularmente bom"?), note quem mesmo assim só teria mais um modificador, a menos que coloque "10% para atinger bom". Commented 8/11/2016 às 11:51
  • Editei a pergunta, veja se entenderam :) Commented 8/11/2016 às 11:58

1 Resposta 1

3

Você pode reproduzir este efeito usando "annotation" :

  1. Adiciona mais um coluna com o role "annotation". {type: 'string', role: 'annotation'}
  2. Em suas options adiciona a opção annotations: { style: 'line' }.
  3. Em seus dados adicione um valor vazio para a coluna da annotation.
    Obs.: Não pode ser null, se nenhuma tiver valor não exibe a linha.

Exemplo

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

function drawChart() {
    var data = google.visualization.arrayToDataTable([
        ['Pergunta', {type: 'string', role: 'annotation'}, 'Valor 1', 'Valor 2'],
        ['Pergunta 1', '', 2, 3],
        ['Pergunta 2', '', 4, 1],
        ['Pergunta 3', '', 1, 1]
    ]);

    var options = {
        title: '2016',
        subtitle: 'Resultados',
        legend: 'none',
        height: 600,
        pointSize: 3,
        vAxis: {
          title: "Status", 
          ticks: [
            {v: 1, f: "Ótimo"}, 
            {v: 2, f: "Bom"}, 
            {v: 3, f: "Regular"}, 
            {v: 4, f: "Ruim"}
          ]
        },
        annotations: {
            style: 'line'
        }
    };

    var chart = new google.visualization.LineChart(document.getElementById('grafico'));

    chart.draw(data, options);
}
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="grafico">
</div>

Fonte

http://jsfiddle.net/NC37X/

1
  • Isso mesmo. Obrigado Commented 8/11/2016 às 12:36

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 .