Google图表增加y轴宽度增加 | Google图表增加y轴宽度增加

本文介绍了Google图表增加y轴宽度增加的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

如何增加Google图表的y轴宽度。请找到图像。左侧全文不正确。请指导我。

how to increase Google chart y axis width. pls find the image. left side full text was not comes properly. please guide me. how to increase Google chart y axis width

推荐答案

需要在选项

为左侧的y轴标签留出空间，请使用 chartArea.left

to leave room for the y-axis labels on left, use chartArea.left

为标题留出空间，使用 chartArea.top

to leave room for the title on top, use chartArea.top

参见以下示例，添加颜色以突出显示每个区域...

see following example, added colors to highlight each area...

google.charts.load('current', {
  callback: function () {
    var data = google.visualization.arrayToDataTable([
      ['Category', 'Score'],
      ['APPLYING LEADERSHIP TECHNIQUES', 40],
      ['ASSERTIVENESS', 30],
      ['COACHING, COUNSELING, TEACHING', 10],
      ['CONFLICT MANAGEMENT', 20]
    ]);

    var options = {
      // adjust chart size
      height: 600,
      width: 800,
      chartArea: {
        // adjust chart area size
        left: 300,
        top: 40,
        height: 500,
        width: 480,
        backgroundColor: 'magenta'
      },
      backgroundColor: 'cyan',
      colors: ['lime'],
      legend: {
        position: 'bottom'
      },
      title: 'Title'
    };

    var chart2 = new google.visualization.BarChart(document.getElementById('barchart_core'));
    chart2.draw(data, options);
  },
  packages: ['bar', 'corechart']
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="barchart_core"></div>

这篇关于Google图表增加y轴宽度增加的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！