色付きのGoogle棒グラフに凡例（色に対してテキストを表示）を追加するにはどうすればよいですか？

Question

Googleマップでグラフを描画しています。チャートには3〜5本の異なる色のバーがあります。 x軸の下のスペースはそれほど大きくないので、バーの右上に凡例を追加したいと思います。伝説はどの色がどのテキストであるかを視覚的に示すべきです（私は評判= 10を持っていないのでイメージを追加できません）。あなたはannotation

注釈は、列の役割を使用して提供されている使用するように、role: 'style'列に似
が既に使用されて聞こえる

var data = new google.visualization.arrayToDataTable([ 
    ['Year', 'ONE', { role: 'style' } ], 
    ['2010', 10, 'color: white'], 
    ['2020', 14, 'color: gray'], 
    ['2030', 16, 'color: yellow'], 
    ['2040', 22, 'color: green'], 
    ['2050', 28, 'color: red'] 
    ]); 


    // Set chart options 
    var options = {'title':'Revenue per Year',  //main title 
        'width':500,      //pixel density 
        'height':500,     //pixel density 
        bar: {groupWidth: "95%"},  //width of the vertical bars 
        legend: { position: "right", maxLines: 3 }, //none=dont show legends 
        backgroundColor: { fill:'transparent' }, //!!NOTE: this is needed for transparency and to remove white background 
        titleTextStyle: { color: 'red',fontSize: 24}, 
        //options for vertical axis(Y) 
        vAxis: { 
        textStyle:{color: '#FFF',fontSize: 24}, 
          slantedText:true, slantedTextAngle:60     // here you can even use 180 
          }, 
        //options for horizontal access(X) 
        hAxis: { 
        textStyle:{color: '#FFF',fontSize: 24}, 
          direction:-1, slantedText:true, slantedTextAngle:60    // here you can even use 180 
          } 
        }; 

Answer 1

：私は私のコードでは使用すべきパラメータ

...

注釈値をデータに追加するには、
を使用するか、ビューを使用して計算しますコラム、次の作業スニペットのように
...

---

注：デフォルトでは

注釈がこのチャートの場合には、バーの端部に
表示されます、バーの左端

注釈配置の標準configuration options
がありますが、手動で注釈を移動することができますあなたがチャートも

のPNG画像を生成する必要がある場合だけgetImageURI、
を使用するときにカスタム変更が反映されません、心に留めておく<text>要素

にx属性を変更することによって 、グラフはいつでも、カラムとして存在対話は、そうを使用する必要があり

を置く、バック元の場所に
を注釈を移動します活動が助けを...

---

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

 
function drawChart() { 
 
    var data = new google.visualization.arrayToDataTable([ 
 
    ['Year', 'ONE', { role: 'style' } ], 
 
    ['2010', 10, 'color: white'], 
 
    ['2020', 14, 'color: gray'], 
 
    ['2030', 16, 'color: yellow'], 
 
    ['2040', 22, 'color: green'], 
 
    ['2050', 28, 'color: red'] 
 
    ]); 
 

 
    var options = { 
 
    title: 'Revenue per Year', 
 
    width: 500, 
 
    height: 500, 
 
    bar: { 
 
     groupWidth: '95%' 
 
    }, 
 
    legend: { 
 
     position: 'none' 
 
    }, 
 
    backgroundColor: { 
 
     fill: 'transparent' 
 
    }, 
 
    titleTextStyle: { 
 
     color: 'red', 
 
     fontSize: 24 
 
    }, 
 
    vAxis: { 
 
     textStyle: { 
 
     color: '#FFF', 
 
     fontSize: 24 
 
     }, 
 
     slantedText: true, 
 
     slantedTextAngle: 60 
 
    }, 
 
    hAxis: { 
 
     textStyle: { 
 
     color: '#FFF', 
 
     fontSize: 24 
 
     }, 
 
     direction: -1, 
 
     slantedText: true, 
 
     slantedTextAngle: 60 
 
    } 
 
    }; 
 

 
    var view = new google.visualization.DataView(data); 
 
    view.setColumns([0, 1, 2, { 
 
    calc: 'stringify', 
 
    role: 'annotation', 
 
    sourceColumn: 0, 
 
    type: 'string' 
 
    }]); 
 

 
    var container = document.getElementById('chart_div'); 
 
    var chart = new google.visualization.BarChart(container); 
 

 
    // move annotations 
 
    var observer = new MutationObserver(function() { 
 
    Array.prototype.forEach.call(container.getElementsByTagName('text'), function(annotation) { 
 
     // identify annotation -- could be tooltip label 
 
     if ((annotation.getAttribute('text-anchor') === 'start') && 
 
      (annotation.getAttribute('fill') !== '#000000')) { 
 
     var chartLayout = chart.getChartLayoutInterface(); 
 
     var annotationBounds = annotation.getBBox(); 
 
     var annotationPadding = 4; 
 
     annotation.setAttribute('x', 
 
      chartLayout.getXLocation(0) - annotationBounds.width - annotationPadding 
 
     ); 
 
     } 
 
    }); 
 
    }); 
 
    observer.observe(container, { 
 
    childList: true, 
 
    subtree: true 
 
    }); 
 

 
    chart.draw(view, options); 
 
}

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