Google图表 - 在y轴值上应用保证金

Posted 2021-04-09

我想做的是增加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

答案

没有标签边距选项， 但你可以在图表的'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>

另一答案

快速添加现有答案：

$('.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轴值上应用保证金的主要内容，如果未能解决你的问题，请参考以下文章

如何在剑道图表十字准线工具提示中提供 X 轴和 Y 轴值？

当y轴值较小时，烛台不能很好地显示

在 highcharts 中计算最小 y 轴值

Keen.io 仪表板图表上的最大和最小 Y 轴值

如何在颤振、x 轴和 y 轴上为图表添加名称？

Google Charts：在相同的“X”值上绘制多个“Y”值