谷歌图表 - BarChart

时间:2016-10-31 17:43:56

标签: google-visualization bar-chart

我正在使用谷歌图表中的BarChart,我想解决这个问题。文字超出了你的限制。我不知道怎么解决它,有人知道我能做什么?

enter image description here

应该是:

enter image description here

这是我的javascript代码?

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

function drawChart() {

    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Ano');
    data.addColumn({ 'type': 'string', 'role': 'tooltip', 'p': { 'html': true } });
    data.addColumn('number', 'Valor Realizado');
    data.addColumn('number', 'idPessoa');

    for (i = 0; i < Object.keys(dataDB).length; i++) {
        var ano = dataDB[i].Ano.toString();
        var valor = (dataDB[i].ValorRealizada);
        var idPessoa = (dataDB[i].IdPessoa);
        data.addRow([ano, createCustomHTMLContent('anual'), valor, idPessoa]);
    }

    var view = new google.visualization.DataView(data);
    view.setColumns([0, 1, 2,
                     {
                         calc: "stringify",
                         sourceColumn: 2,
                         type: "string",
                         role: "annotation"
                     }]);

    var options = {
        width: 1000,
        height: 400,
        focusTarget: 'category',
        tooltip: { isHtml: true },
        hAxis: { textPosition: 'none' },
        legend: { position: 'none' },
        chartArea: { left: 50, top: 30, width: "70%", height: "200%" },
        bar: { groupWidth: "25" }

    };

    var formatter = new google.visualization.NumberFormat({ decimalSymbol: ',', groupingSymbol: '.', negativeColor: 'red', negativeParens: true, prefix: 'R$' });
    formatter.format(data, 2);

    var chart = new google.visualization.BarChart(document.getElementById("divResultado"));
    chart.draw(view, options);

    google.visualization.events.addListener(chart, 'select', function () {
        var selection = chart.getSelection();
        if (selection.length) {
            var row = selection[0].row;
            var ano = data.getValue(row, 0);
            var valor = data.getValue(row, 2);
            var idPessoa = data.getValue(row, 3);
            if (valor > 0)
                CallMensal(idPessoa, ano);
        }
    });
}

1 个答案:

答案 0 :(得分:0)

似乎在这里工作正常,请参阅以下工作代码段...

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

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Ano');
  data.addColumn({ 'type': 'string', 'role': 'tooltip', 'p': { 'html': true } });
  data.addColumn('number', 'Valor Realizado');

  data.addRow(['2013', '', 120520097.31]);
  data.addRow(['2014', '', 875436546.78]);
  data.addRow(['2015', '', 929521097.31]);

  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1, 2, {
calc: "stringify",
sourceColumn: 2,
type: "string",
role: "annotation"
  }]);

  var options = {
width: 1000,
height: 400,
focusTarget: 'category',
tooltip: { isHtml: true },
hAxis: { textPosition: 'none' },
legend: { position: 'none' },
chartArea: { left: 50, top: 30, width: "70%", height: "200%" },
bar: { groupWidth: "25" }
  };

  var formatter = new google.visualization.NumberFormat({ decimalSymbol: ',', groupingSymbol: '.', negativeColor: 'red', negativeParens: true, prefix: 'R$' });
  formatter.format(data, 2);

  var chart = new google.visualization.BarChart(document.getElementById("divResultado"));
  chart.draw(view, options);
}
&#13;
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="divResultado"></div>
&#13;
&#13;
&#13;