Googleのグラフ内にラインの凡例のラベルを表示する

Question

Googleのグラフの線グラフの各行の横にラベルを表示します。誰かが私が設定すべきオプションに私を指摘することはできますか？注釈とは何か？あなたは直列にポイントをラベル付けするために注釈を使用することができます

Answer 1

。

注釈は列として追加されます。
data.addColumn({role: 'annotation', type: 'string'});

各注釈列は、それが表す値列に従う必要があります。

質問の画像を見ると、シリーズごとに1つの注釈、またはラベルしか表示されないようです。
そのように、最後の行を除いて、注釈列の値をnullに設定します。

は、次の例を参照してください...

注釈が

google.charts.load('current', { 
 
    callback: function() { 
 
    var data = new google.visualization.DataTable(); 
 
    data.addColumn('number', 'Week'); 
 
    data.addColumn('number', 'NO'); 
 
    data.addColumn({role: 'annotation', type: 'string'}); 
 
    data.addColumn('number', 'UK'); 
 
    data.addColumn({role: 'annotation', type: 'string'}); 
 
    data.addColumn('number', 'NL'); 
 
    data.addColumn({role: 'annotation', type: 'string'}); 
 
    data.addColumn('number', 'DK'); 
 
    data.addColumn({role: 'annotation', type: 'string'}); 
 
    data.addColumn('number', 'SE'); 
 
    data.addColumn({role: 'annotation', type: 'string'}); 
 
    data.addColumn('number', 'FI'); 
 
    data.addColumn({role: 'annotation', type: 'string'}); 
 
    data.addColumn('number', 'IL'); 
 
    data.addColumn({role: 'annotation', type: 'string'}); 
 
    data.addColumn('number', 'US 2014'); 
 
    data.addColumn({role: 'annotation', type: 'string'}); 
 

 
    var currentWeek = 27; 
 
    var ticks = []; 
 
    for (var i = 0; i < 52; i++) { 
 
     ticks.push(i + 1); 
 
     var row = []; 
 
     if (i < currentWeek) { 
 
     row.push(i + 1); 
 
     for (var x = 1; x < data.getNumberOfColumns(); x=x+2) { 
 
      var value = x * (Math.pow(i, 3)); 
 
      var annot = null; 
 
      if (i === (currentWeek - 1)) { 
 
      annot = data.getColumnLabel(x) + ' - ' + value; 
 
      } 
 
      row.push(value, annot); 
 
     } 
 
     data.addRow(row); 
 
     } 
 
    } 
 

 
    new google.visualization.LineChart(document.getElementById('chart_div')).draw(data, { 
 
     annotations: { 
 
     stem: { 
 
      length: 0 
 
     } 
 
     }, 
 
     chartArea: { 
 
     width: '80%' 
 
     }, 
 
     hAxis: { 
 
     format: 'Week 0', 
 
     ticks: ticks 
 
     }, 
 
     height: 600 
 
    }); 
 
    }, 
 
    packages: ['corechart'] 
 
});

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

...カスタマイズすることができ、いくつかの設定があり、特定のチャートの configuration optionsを参照してください