google apiを使用した折れ線グラフの見た目と注釈値の差を減らす方法

Question

私はgoogle apiを使って折れ線グラフを作成しています。私はhaxisラインと注釈値ラベルの間のギャップを減らしたい。私は実際のイメージを示します。

var data = new google.visualization.DataTable(); 
        data.addColumn('string', ''); 
        data.addColumn({type: 'string', role: 'annotation'}); 
        data.addColumn('number', ''); 
        data.addColumn({type: 'string', role: 'annotation'}); 

    data.addRows([['2014', '20%', 63569, '63569']]); 
    data.addRows([['2014', '20%', 62034, '62034']]); 
    data.addRows([['2014', '19%', 60605, '60605']]); 
    data.addRows([['2014', '19%', 60605, '60605']]); 


    var chart = new google.visualization.LineChart(document.getElementById('chart_div)); 
        chart.draw(data, options); 

Answer 1

あなたはオプションを使用することができます - >annotations.stem.length

ギャップを減らすために0にlengthを設定

annotations: { 
    stem: { 
    length: 0 
    } 
} 

y軸を調整するseriesオプションを調整しますアノテーション

...作業スニペット以下

google.charts.load('current', { 
 
    callback: drawChart, 
 
    packages: ['corechart'] 
 
}); 
 

 
function drawChart() { 
 
    var data = new google.visualization.DataTable(); 
 
    data.addColumn('string', ''); 
 
    data.addColumn({type: 'string', role: 'annotation'}); 
 
    data.addColumn('number', ''); 
 
    data.addColumn({type: 'string', role: 'annotation'}); 
 
    data.addRows([['2014', '20%', 63569, '63569']]); 
 
    data.addRows([['2015', '20%', 62034, '62034']]); 
 
    data.addRows([['2016', '19%', 60605, '60605']]); 
 
    data.addRows([['2017', '19%', 57467, '57467']]); 
 

 
    var chart = new google.visualization.LineChart(document.getElementById('chart_div')); 
 
    chart.draw(data, { 
 
    annotations: { 
 
     stem: { 
 
     length: 0 
 
     }, 
 
     textStyle: { 
 
     bold: true, 
 
     color: '#000000' 
 
     } 
 
    }, 
 
    backgroundColor: '#fbe9e7', 
 
    colors: ['#ffc107'], 
 
    legend: 'none', 
 
    pointSize: 8, 
 
    series: { 
 
     0: { 
 
     annotations: { 
 
      stem: { 
 
      color: 'transparent', 
 
      length: 12 
 
      } 
 
     } 
 
     } 
 
    }, 
 
    vAxis: { 
 
     gridlines: { 
 
     count: 0 
 
     } 
 
    } 
 
    }); 
 
}

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

を見ます