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

我的小提琴：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/

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>

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

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

来源

1 个答案: