是否可以在柱形圖中的一個Google圖表欄中添加多個標簽？

Question

是否可以在柱形圖的每個欄中添加一個附加標簽，而又不影響標簽所在的欄的顯示？

這是我當前設置的圖表

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 ，一欄表示percentage標簽。

我想要的是每個條形圖的高度都基於value標簽，當我將鼠標懸停在條形圖上時，彈出窗口將顯示value標簽，該標簽的val以及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>