javascript - 如何强制 Google Chart Legend 显示行值？

Question

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

我的 fiddle :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);
  }

我的 fiddle :https://jsfiddle.net/8jaL9kf3/

Answer 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 是序列号，第二个是行号。
一旦我们知道了条的坐标，
我们可以将复制的标签放在它们下面。

请参阅以下工作片段...

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>

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