複数のラベルを縦棒グラフの1つのGoogleグラフバーに追加することはできますか？

Question

ラベルが存在するバーの表示に関係なく、追加のラベルを列チャートの各バーに追加することはできますか？

これが私の現在のチャートは今の行動は、ステージごとに2つのバーを示している

this.populationChart.myChartObject.data = { 
    'cols': [ 
     { id: 's', label: 'Stage', type: 'string' }, 
     { id: 'v', label: 'Value', type: 'number' }, 
     { id: 'p', label: 'Percent', type: 'number' }, 
     { role: 'style', type: 'string' } 
    ], 'rows': [ 
     { 
      c: [ 
       { v: 'Meet Criteria' }, 
       { v: this.populationSummary.inDatabase }, 
       { v: this.studyService.calcPercent(this.populationSummary.inDatabase, this.populationSummary.total) }, 
       { v: '#e94926' } 
      ] 
     }, 
     { 
      c: [ 
       { v: 'Invited' }, 
       { v: this.populationSummary.invited }, 
       { v: this.studyService.calcPercent(this.populationSummary.invited, this.populationSummary.inDatabase) }, 
       { v: '#62b8af' } 
      ] 
     }, 
     { 
      c: [ 
       { v: 'Screened' }, 
       { v: this.populationSummary.screened }, 
       { v: this.studyService.calcPercent(this.populationSummary.screened, this.populationSummary.invited) }, 
       { v: '#f2673a' } 
      ] 
     }, 
     { 
      c: [ 
       { v: 'Qualified' }, 
       { v: this.populationSummary.qualified }, 
       { v: this.studyService.calcPercent(this.populationSummary.qualified, this.populationSummary.screened) }, 
       { v: '#ffc828' } 
      ] 
     }, 
     { 
      c: [ 
       { v: 'Scheduled' }, 
       { v: this.populationSummary.scheduled }, 
       { v: this.studyService.calcPercent(this.populationSummary.scheduled, this.populationSummary.screened) }, 
       { v: '#5a5538' } 
      ] 
     } 
    ] 
}; 

calcPercent = (numerator: number, denominator: number): number => { 
    if (denominator === 0) { 
     return 0; 
    }; 
    if (denominator !== 0) { 
     return (Math.round((numerator/denominator) * 100)); 
    }; 
}; 

を設定しています。 valueラベルの値の1つのバー、percentageラベルの1つのバー。各バーの高さのためである私は何をしたい

はvalueラベル、およびときに私のマウスはバーの上にポップアップがvalueラベルを示しており、そのラベルのヴァルに基づいて、だけでなく、percentageラベルを表示します。

バーの高さ/プレゼンテーションは基本的にvalueラベルに基づいていますが、マウスオーバー時にはラベルとその値の両方を表示します。

これは可能ですか？この例では

Answer 1

：これはラベルのために作られなければならない編集である

var data = google.visualization.arrayToDataTable([ 
    ['Element', 'Density', { role: 'style' }, { role: 'annotation' } ], 
    ['Copper', 8.94, '#b87333', 'Cu' ], 
    ['Silver', 10.49, 'silver', 'Ag' ], 
    ['Gold', 19.30, 'gold', 'Au' ], 
    ['Platinum', 21.45, 'color: #e5e4e2', 'Pt' ] 
    ]); 

： `に似

<script type="text/javascript" 
src="https://www.gstatic.com/charts/loader.js"></script> 
    <script type="text/javascript"> 
    google.charts.load("current", {packages:['corechart']}); 
    google.charts.setOnLoadCallback(drawChart); 
    function drawChart() { 
     var data = google.visualization.arrayToDataTable([ 
     ["Element", "Density", { role: "style" } ], 
     ["Copper", 8.94, "#b87333"], 
     ["Silver", 10.49, "silver"], 
     ["Gold", 19.30, "gold"], 
     ["Platinum", 21.45, "color: #e5e4e2"] 
     ]); 

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

     var options = { 
     title: "Density of Precious Metals, in g/cm^3", 
     width: 600, 
     height: 400, 
     bar: {groupWidth: "95%"}, 
     legend: { position: "none" }, 
     }; 
     var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values")); 
     chart.draw(view, options); 
    } 
    </script> 
<div id="columnchart_values" style="width: 900px; height: 300px;"></div>