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>

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的间距

Google图表-在y轴值上应用边距

2 个答案: