如何强制谷歌图表图例显示行值？

Posted 2023-02-16

【中文标题】如何强制谷歌图表图例显示行值？

【英文标题】：How to force the Google Chart Legend to show Row values?

【发布时间】：2019-07-14 20:51:58

【问题描述】：

我希望这个问题能被理解，因为我发现这个话题很难解释。我正在寻找的是 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);
  

我的小提琴：https://jsfiddle.net/927pjLvb/2/

第二版：

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

我的小提琴：https://jsfiddle.net/8jaL9kf3/

【参考方案1】：

从第二个版本开始，将 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

第一个0 是序列号，第二个是行号。 一旦我们知道了条形图的坐标， 我们可以将复制的标签放在它们下面。

请参阅以下工作 sn-p...

google.charts.load('current', 
  packages:['corechart']
).then(function () 
  var data = google.visualization.arrayToDataTable([
    ['Element', 'Copper', 'Silver', 'Gold', 'Platinum'],
    ['', 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 container = document.getElementById('columnchart_values');
  var chart = new google.visualization.ColumnChart(container);

  google.visualization.events.addListener(chart, 'ready', function (gglClick) 
    // chart svg
    var svg = container.getElementsByTagName('svg')[0];

    // chart layout
    var chartLayout = chart.getChartLayoutInterface();

    // get all chart labels, chart title will be first, legend labels next
    var labels = container.getElementsByTagName('text');

    // process each series in the data table
    for (var series = 1; series < data.getNumberOfColumns(); series++) 
      // get bar bounds
      var barBounds = chartLayout.getBoundingBox('bar#' + (series - 1) + '#0');

      // copy legend label
      var barLabel = labels[series].cloneNode(true);

      // padding above label
      var labelPadding = 4;

      // center align label
      barLabel.setAttribute('text-anchor', 'middle');

      // set label x,y coordinates
      barLabel.setAttribute('x', barBounds.left + (barBounds.width / 2));
      barLabel.setAttribute('y', barBounds.top + barBounds.height + parseFloat(barLabel.getAttribute('font-size')) + labelPadding);

      // add label to chart svg
      svg.appendChild(barLabel);
    
  );

  chart.draw(view, options);
);

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="columnchart_values"></div>

注意：以上示例假定图表将具有标题选项。

【讨论】：

是的，图表确实有一个标题和更多系列，所以这个美丽的作品非常棒，因为它已经是动态的。我从没想过有人可以深入挖掘谷歌的胆量，喜欢它:)