谷歌图表中图例的新行（饼图）答案

【问题标题】：New line for legend in google chart (PieChart)谷歌图表中图例的新行（饼图）
【发布时间】：2018-09-05 10:47:49
【问题描述】：

我正在使用 Google 图表（饼图）并希望在新行上开始每个图例 - 不像下图那样：

这是我的代码：

 var data = new google.visualization.arrayToDataTable(chartData, false);

                        var optionsErrorDetails = {
                            title: 'My Piechart',
                            fontSize: 10
                            ,

                            pieHole: 0.3,

                            legend:
                                {
                                    position: 'top',
                                    alignment: 'start',

                                textStyle: {
                                    fontSize: 8
                                },

                            },


                        };

                        var chartErrorDetails = new google.visualization.PieChart(document.getElementById('errorDetails'));

                        chartErrorDetails.draw(data, optionsErrorDetails);

【问题讨论】：

标签： javascript charts google-visualization legend-properties

【解决方案1】：

保证每个图例标签显示在新行上的唯一方法是将图例放置在右侧，
请参阅以下工作 sn-p...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var chartData = [
    ['Category', 'Value'],
    ['Category Alpha', 46.7],
    ['Category Beta', 53.3],
  ];

  var data = google.visualization.arrayToDataTable(chartData, false);

  var optionsErrorDetails = {
    title: 'My Piechart',
    fontSize: 10,
    pieHole: 0.3,
    legend: {
      position: 'right',
      textStyle: {
        fontSize: 8
      },
    },
  };

  var chartErrorDetails = new google.visualization.PieChart(document.getElementById('errorDetails'));

  chartErrorDetails.draw(data, optionsErrorDetails);
});

#errorDetails {
  display: inline-block;
}

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

当legend.position 为'top' 时，有一个maxLines 选项有效。
但这只是允许额外的行，而不是强制他们，
来自docs...

legend.maxLines - 图例中的最大行数。将此设置为大于一的数字以向图例添加线条。注意：用于确定实际渲染行数的确切逻辑仍在不断变化。

注意：arrayToDataTable 是一个静态方法，不需要new 关键字...

var data = google.visualization.arrayToDataTable(chartData, false);

编辑

您可以尝试手动移动标签，
有关粗略的示例，请参见以下工作 sn-p...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var chartData = [
    ['Category', 'Value'],
    ['Category C', 50],
    ['Category B', 50],
    ['Category A', 50],
  ];

  var data = google.visualization.arrayToDataTable(chartData, false);

  var optionsErrorDetails = {
    chartArea: {
      bottom: 72
    },
    title: 'My Piechart',
    fontSize: 10,
    pieHole: 0.3,
    legend: {
      position: 'bottom',
      alignment: 'middle',
      textStyle: {
        fontSize: 8
      },
    },
  };

  var container = document.getElementById('errorDetails');
  var chartErrorDetails = new google.visualization.PieChart(container);

  google.visualization.events.addListener(chartErrorDetails, 'ready', function () {
    var circles = container.getElementsByTagName('circle');
    var labels = container.getElementsByTagName('text');
    var labelIndex = -1;
    var fontSize;
    var radius;
    var xCoordCircle;
    var xCoordLabel;
    var yCoordLabel;
    var yCoordCircle;
    Array.prototype.forEach.call(labels, function(label) {
      if ((label.getAttribute('text-anchor') === 'start') && (label.getAttribute('fill') !== '#ffffff')) {
        labelIndex++;
        if (labelIndex === 0) {
          radius = parseFloat(circles[labelIndex].getAttribute('r'));
          xCoordCircle = circles[labelIndex].getAttribute('cx');
          xCoordLabel = label.getAttribute('x');
        } else {
          fontSize = parseFloat(label.getAttribute('font-size')) * labelIndex;
          yCoordLabel = parseFloat(label.getAttribute('y'));
          label.setAttribute('x', xCoordLabel);
          label.setAttribute('y', (yCoordLabel - fontSize - (radius * labelIndex)));
          yCoordCircle = parseFloat(circles[labelIndex].getAttribute('cy'));
          circles[labelIndex].setAttribute('cx', xCoordCircle);
          circles[labelIndex].setAttribute('cy', yCoordCircle - fontSize - (radius * labelIndex));
        }
      }
    });
  });

  chartErrorDetails.draw(data, optionsErrorDetails);
});

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

【讨论】：

它没有：/ 我想在底部显示图例，但这可能是不可能的：/ 我之前使用了 position: 'right'，但是在许多短文本上很难阅读长文本线...这就是为什么我希望我可以将一条长线移到底部...
认为知道使用标准配置选项是不可能的可能会有所帮助，您可以尝试手动移动，请参阅上面的 EDIT...

【解决方案2】：

我不知道它是否有任何帮助，但是对于Highcharts，让图例项目垂直显示的方式，你必须说：布局：'垂直'。可能这对谷歌图表的工作方式相同。（见下文）

                   legend: {
                    layout: 'vertical',
                    align: 'top',
                    verticalAlign: 'top',
                    fontweight: 'normal',
                    margin: -4,
                    padding: 0
                },

【讨论】：