Javascript 如何强制Google图表图例显示行值？

我希望这个问题能被理解，因为我觉得这个话题很难解释。我正在寻找的是一个谷歌（列）图表的解决方案，在该图表中显示X轴和带有值的图例，就像饼图有时所做的那样。不过，我发现的大多数示例都只是关闭了图例

到目前为止，我得到的是：拟合x轴的第一个示例：

图例只显示了“密度”，这很有意义，但我也在寻找图例中的所有金属。因此，我改变了数据集的顺序，最终得到了这个：

这里x轴显示的是密度，而不是金属。所以我要找的是这样的东西：

无论哪种方式，无论是对图例的操纵还是对轴的操纵，对我都有效。有什么办法吗

来源 第一版

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%"},

      };
      var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
      chart.draw(view, options);
  }

我的小提琴：

第二版：

function drawChart() {
      var data = google.visualization.arrayToDataTable([
       ["Element", "Copper", "Silver", "Gold", "Platinum"],
       ["Density", 8.94, 10.49, 19.30, 21.45],

      ]);

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

      var options = {
        title: "Density of Precious Metals, in g/cm^3",
        width: 600,
        height: 400,
        colors: ['#b87333', 'silver', 'gold', '#e5e4e2'],
        bar: {groupWidth: "95%"},

      };
      var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
      chart.draw(view, options);
  }

---

My fiddle:

从第二个版本开始，将x轴标签留空

var data = google.visualization.arrayToDataTable([
  ['Element', 'Copper', 'Silver', 'Gold', 'Platinum'],
  ['', 8.94, 10.49, 19.30, 21.45]
]);

在图表的

'ready'

事件中，
从图例中复制标签，
然后把它们放在栏杆下面，
使用图表方法-->

getChartLayoutInterface（）

布局界面具有方法-->

getBoundingBox（id）

此方法返回图表元素的坐标，
通过传递元素的id。
在这种情况下，我们想知道这些条的坐标。
每个条的id结构如下所示

'bar#0#0'  // <-- first bar

---

是的，这些图表确实有一个标题和更多的系列，因此这种美的效果非常好，因为它已经是动态的了。我从来没想过有人能如此深沉地挖掘谷歌的胆量，热爱它：）