谷歌图表中的传奇新行（PieChart）

Posted 2021-04-09

我正在使用谷歌图表（饼图）并希望在新行上开始每个图例 - 不像下图所示：

这是我的代码：

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

答案

保证每个图例标签的唯一方法是在新行上显示，将图例定位在右侧， 请参阅以下工作代码段...

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>

另一答案

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

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

以上是关于谷歌图表中的传奇新行（PieChart）的主要内容，如果未能解决你的问题，请参考以下文章

Highcharts (PieChart) - 第二次绘制时图表宽度减小

谷歌浏览器调试jsp 引入代码片段，如何调试代码片段中的js

Techart 传奇风格

我想将变量放入Google Piechart中，但它会不断从选择中选择最后的内容

MPAndroidChart PieChart 在 ScrollView 中使用时不显示

更改谷歌图表中的数字格式