charts - Google Charts - 在 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

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>