时间戳

首页 > 解决方案 > 如何放大与轴文本保持一致的区域？谷歌图表

javascript - 如何放大与轴文本保持一致的区域？谷歌图表

问题描述

我对水平数据的间距有疑问，当文本稍微大一点时，它会缩小三个点，我的目标是生成pdf，它必须显示完整的值。1

<script type="text/javascript" src="http://www.google.com/jsapi"></script>

    <script type="text/javascript">
        function init() {
            google.load("visualization", "1.1", {
                packages: ["corechart"],
                callback: 'grafico'
            });
        }

        function grafico() {

             var data = google.visualization.arrayToDataTable([
                ['Task', 'Hours per Day'],
                ['Coding', 11],
                ['Eat', 1],
                ['Commute', 2],
                ['Looking for code Problems', 4],
                ['Sleep', 6]
            ]);

            var data = google.visualization.arrayToDataTable(dados);

            var view = new google.visualization.DataView(data);

                view.setColumns([0,
                    1, {
                        type: 'string',
                        role: 'annotation',
                        sourceColumn: 1,
                        calc: 'stringify'
                    },
                    2, {
                        type: 'string',
                        role: 'annotation',
                        sourceColumn: 2,
                        calc: 'stringify'
                    }

                ]);

                var options = {
                    title: 'Cronograma',
                    vAxis: {title: 'Percentual'},
                    hAxis: {
                        title: 'Grupo',
                        // slantedText: true,
                        // slantedTextAngle: 90,
                        textStyle: {
                            fontSize: 10,
                        },
                    },
                };

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

            chart.draw(view, options);
        }
    </script>

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

您不能放大水平文本区域以使文本不被缩小。

标签： javascriptcsschartsgoogle-visualization

解决方案

要使用水平文本放大区域，请
使用配置选项... 

chartArea: {
  bottom: 200
},

注意：因此，您可能还必须增加top& left。 

chartArea: {
  bottom: 300,
  left: 150,
  top: 36
},

请参阅以下工作片段... 

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
     ['Name', 'Previsto', 'Executado'],
     ['OBRA DE REQUALIFICACAO DA MORE TEXT', 22, 22],
     ['DEMOLICOES RETIRADAS E REQUEST MORE TEST', 4, 0],
     ['DRENA', 0, 0]
  ]);

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

  var options = {
    chartArea: {
      bottom: 300,
      left: 200,
      top: 36
    },
    height: 600,
    title : 'Cronograma',
    vAxis: {title: 'Percentual'},
    hAxis: {
      slantedText: true,
      title: 'Grupo'
    }
  };

  var container = document.getElementById('chart_div');
  var chart = new google.visualization.ColumnChart(container);

  chart.draw(view, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

作为最后的手段，你可以减小字体大小...... 

hAxis: {
  slantedText: true,
  title: 'Grupo',
  textStyle: {
    fontSize: 8
  }
}

推荐阅读