谷歌图表 - 在y轴值上应用边距。

Question

我想要做的是增加图表中 y 轴数值和相应条形之间的间距。

所以，如果图表中有一条在 Y 轴上的值为“Python”的条形，我想要增加字符串“Python”和可视化条形之间的空间。

现在：

Python__========================================================

我的目标：

Python___________=========================================================

___ 表示 y 轴标签和可视化条形之间的空格。

我尝试在图表的选项部分使用 chartArea{right:200} 和 textPosition:out。

    var options = {

        chartArea:{right: 200},


        'vAxis': {
            title:'',
            textStyle : {
                fontSize: 25 
            },
            textPosition: 'out'


        },




function drawChart() {
var data = google.visualization.arrayToDataTable([
['Coding-Skills', 'Skill-Level'],

['C', {v: 0.3, f:'low'}],
['Python', {v: 1, f:'medium'}],
['Javascript', {v: 1.5, f:'medium'}],
['HTML/CSS', {v: 1.5, f:'medium'} ]
]);

    var options = {

        chartArea: {
            left: 1400
        },
        'hAxis': {
            gridlines:{
            count: 0},

            textStyle : {
                fontSize: 25 
            }
        },

        'vAxis': {
            title:'',
            textStyle : {
                fontSize: 25 
            }

        },
      chart: {
      },
      bars: 'horizontal', 

    axes: {

        x: {
          0: { side: 'bottom', label: 'Years of experience'} ,
          textStyle : {
        fontSize: 35
    }

        }
      }
    };
    var chart = new google.charts.Bar(document.getElementById('barchart_material'));
    chart.draw(data, google.charts.Bar.convertOptions(options));
  }

Applying margin-right

- natzer

---

你能否更新你的问题，包括更多关于你想要什么的细节？如果相关，也可以提及一下你尝试过什么。 - user2653663

Answer 1

标签边距没有选项，
但是你可以在图表的 'ready' 事件中手动移动它们

找到标签并更改 'x' 属性

查看以下工作示例，
这里使用 chartArea 选项以确保有足够的空间...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Language', 'Skill-Level'],
    ['C', 20],
    ['Python', 35],
    ['Javascript', 50]
  ]);

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

  google.visualization.events.addListener(chart, 'ready', function () {
    var labels = container.getElementsByTagName('text');
    Array.prototype.forEach.call(labels, function(label) {
      // move axis labels
      if (label.getAttribute('text-anchor') === 'end') {
        var xCoord = parseFloat(label.getAttribute('x'));
        label.setAttribute('x', xCoord - 20);
      }
    });
  });

  var options = {
    chartArea: {
      left: 100,
      right: 200
    },
    colors: ['#aaaaaa'],
    hAxis: {
      baselineColor: 'transparent',
      gridlines: {
        count: 0
      },
      textStyle: {
        color: '#aaaaaa'
      }
    },
    height: 400,
    legend: {
      textStyle: {
        color: '#aaaaaa'
      }
    },
    vAxis: {
      textStyle: {
        color: '#aaaaaa'
      }
    }
  };

  chart.draw(data, options);
});

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

- WhiteHat

Answer 2

对现有答案的快速补充：

$('.transactionValuationChart text').each(function(){
    if( $(this).attr('text-anchor') == 'middle' ){
        $(this).attr('y', parseFloat($(this).attr('y')) + 20 );
    }else{
        $(this).attr('x', parseFloat($(this).attr('x')) - 20 );
        console.log("left");
    }
 });

这是一个jQuery的示例，它为x和y轴都添加了20px的间距。

- Pat Dobson