Google Charts : hAxis에 대한 패딩 설정

hAxis 레이블에 차트 자체와 범례 사이에 패딩이 거의 없거나 전혀없는 것을 제외하면 내 차트가 예상대로 잘 작동합니다. 그것을 높이는 방법이 있습니까?Google Charts : hAxis에 대한 패딩 설정

옵션 :

var options = { 
      colors:['rgb(32, 170, 188)', 'rgb(32, 188, 77)'], 
      lineWidth:4, 
      areaOpacity: 0.15, 
      width:$(window).width() * 0.5, 
      height:$(window).width() * 0.25, 
      animation: { 
       "startup": true, 
       duration: 1200, 
       easing: 'out', 
      }, 
      fontName: 'Open Sans', 
      legend: { 
      position:'bottom', 
      }, 
      chartArea:{ 
      width:'90%', 
      height:'80%', 
      } 
     };

나는, 차트 'ready'되면이 예에서,
또는

'animationfinish'에이 라벨을 수정하는 것입니다 생각할 수

출처

2016-07-02 Ron I

는'chartArea.height' 도움말을 감소 않 고, 다른 옵션이있을 수 있습니다, 애니메이션과 불안해의 종류를 본다? – WhiteHat

@WhiteHat - 제안 해 주셔서 감사합니다.하지만 시도했지만 시도하지 않았습니다. –

정확히 무슨 뜻인지는 모르겠지만, 차트가 숨겨진 요소로 그려진 경우 Google 차트 팀에서 글꼴 크기가 제대로 계산되지 않는다고 일부 문제에서 언급했습니다. 그게 여기있을 수도 있니? – nbering

유일한 옵션, y 위치가 4

만큼 증가합니다.

당신이 알고있는 경우
는 SVG

google.charts.load('current', { 
 
    'callback': function() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
     ['Year', 'Sales', 'Expenses'], 
 
     ['2013', 1000,  400], 
 
     ['2014', 1170,  460], 
 
     ['2015', 660,  1120], 
 
     ['2016', 1030,  540] 
 
    ]); 
 

 
    var options = { 
 
     colors:['rgb(32, 170, 188)', 'rgb(32, 188, 77)'], 
 
     lineWidth:4, 
 
     animation: { 
 
     startup: true, 
 
     duration: 1200, 
 
     easing: 'out', 
 
     }, 
 
     areaOpacity: 0.15, 
 
     fontName: 'Open Sans', 
 
     legend: { 
 
     position:'bottom', 
 
     }, 
 
     chartArea:{ 
 
     } 
 
    }; 
 

 
    var container = document.getElementById('chart_div'); 
 
    var chart = new google.visualization.AreaChart(container); 
 
    google.visualization.events.addListener(chart, 'animationfinish', moveLabels); 
 
    google.visualization.events.addListener(chart, 'ready', moveLabels); 
 

 
    function moveLabels() { 
 
     Array.prototype.forEach.call(container.getElementsByTagName('text'), function (label) { 
 
     if (label.getAttribute('text-anchor') === 'middle') { 
 
      label.setAttribute('y', parseFloat(label.getAttribute('y')) + 4); 
 
     } 
 
     }); 
 
    } 
 

 
    chart.draw(data, options); 
 
    }, 
 
    'packages':['corechart'] 
 
});

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

출처

2016-07-02 16:25:39 WhiteHat

Google Charts : hAxis에 대한 패딩 설정

답변

관련 문제