javascript - 是否可以向柱形图中的一个 google-chart 栏添加多个标签？

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，还显示百分比标签。

基本上，栏的高度/呈现仅基于值标签，但当鼠标悬停时显示两个标签及其值。

这可能吗？

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>