Javascript 是否可以将多个标签添加到柱形图中的一个google图表栏中？

是否可以在柱形图的每个条形图上添加一个附加标签，而不影响标签所在条形图的显示

这是我当前设置的图表

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));
    };
};

现在的行为显示每个阶段有两个小节。一个条形表示

值

标签的值，一个条形表示

百分比

标签

我想要的是每个条的高度基于

值

标签，当我将鼠标移到条上时，弹出窗口显示

值

标签和该标签的val，但也显示

百分比

标签

基本上，条形图的高度/显示方式只能基于

值

标签，但在鼠标悬停时显示标签及其值

这可能吗？

在本例中：

   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>

load（“当前”{packages:['corechart']}）；
google.charts.setOnLoadCallback（drawChart）；
函数绘图图（）{
var data=google.visualization.arrayToDataTable([
[“元素”、“密度”{role:“样式”}]，
[“铜”，8.94，#b87333”]，
[“银”，10.49，“银”]，
[“黄金”，19.30，“黄金”]，
[“白金”，21.45，“颜色：#e5e4e2”]
]);
var view=newgoogle.visualization.DataView（数据）；
view.setColumns（[0,1,1，
{calc:“字符串化”，
资料来源专栏：1，
键入：“字符串”，
角色：“注释”}，
2]);
变量选项={
标题：“贵金属密度，单位为g/cm^3”，
宽度：600，
身高：400，
条：{groupWidth:“95%”，
图例：{位置：“无”}，
};
var chart=new google.visualization.ColumnChart（document.getElementById（“ColumnChart_values”）；
图表绘制（视图、选项）；
}

类似于

'style'

列角色，您可以使用

'tooltip'

列角色自定义鼠标悬停栏上显示的值--使用此选项代替百分比列--请参见示例…@WhiteHat创建自定义工具提示非常有效！非常感谢你为我指明了正确的方向。我不知道这是一个我可以使用的功能。经过一番胡闹之后，我已经把所有的酒吧都摆满了我需要的东西！再次感谢！