logo标签列表

如何避免谷歌柱状图上标签重叠？

google-visualizationbar-chart
7
我正在创建一个堆积条形图，并需要在堆叠内显示标签。但是有些标签重叠了。参考图像。
请问您如何使用Google Charts避免标签重叠问题？ 

<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <div id="chart_div"></div>
 <script type="text/javascript">
  google.charts.load('current', {packages: ['corechart', 'bar']});
  google.charts.setOnLoadCallback(drawStacked);

function drawStacked() {
      var data = new google.visualization.arrayToDataTable([['Time Period','XYZ',{ role: 'annotation'},'ABC',{ role: 'annotation'},{ role: 'annotation'},'Average'],
        ['Aug', 3754,'3754', 2089,'2089','5,843',4000],
        ['Sept', 900,'900', 200,'200', '100',4000],
  ['Oct', 2000,'2000', 4900,'4900', '6000',4000],
  ['Nov', 1700,'1700', 2200,'2200', '3900',4000],
  ['Dec', 2400,'2400', 2089,'2200', '4600',4000]
      ]);

      var options = {
        title: 'Overview of the Tickets',
        isStacked: true,
  orientation: 'horizontal',
        hAxis: {
          title: 'Time Period',
          annotations: {}
           },
        vAxis: {
          title: 'Number of Tickets'
        },
  seriesType: 'bars',
      series: {2: {type: 'line'}}
      };

      var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }
  </script>
</head>

</html>

问候， Srikanth

2个回答
4

首先，你的数据中似乎有一个额外的 annotation 列，
它似乎不属于任何特定的列。

以上内容来自上面的问题...

var data = new google.visualization.arrayToDataTable([
  [
    'Time Period',
    'XYZ',
    {role: 'annotation'},
    'ABC',
    {role: 'annotation'},
    {role: 'annotation'},  // <-- extra annotation?
    'Average'
  ],
  [
    'Aug',
    3754,
    '3754',
    2089,
    '2089',
    '5,843',  // <-- extra annotation?
    4000
  ],
  ...
]);

这可能是它如此混乱的原因之一。
无论如何，使用 annotations 配置选项 进行调整。
配置选项可用于整个图表，或仅用于特定系列。
var options = {
  // entire chart
  annotations: {
    textStyle: {
      fontSize: 10
    }
  },
  series: {
    0: {
      // series 0
      annotations: {
        stem: {
          length: 0
        },
      },
    },
    1: {
      // series 1
      annotations: {
        stem: {
          length: 16
        }
      },
    },
  }
  ...
};

具体来说，您可以使用annotations.textStyle.fontSize和annotations.stem.length的组合来防止重叠。请参见以下工作示例... annotations.textStyle.fontSize被降低到整个图表中，这使得第二列上的第一个注释可以适应柱形图。
在第一系列上，annotations.stem.length设置为零（0），在第二个系列上设置为16。
（问题中的额外注释已被删除） 

google.charts.load('current', {
  callback: drawStacked,
  packages: ['corechart']
});

function drawStacked() {
  var data = new google.visualization.arrayToDataTable([
    ['Time Period', 'XYZ', {role: 'annotation'}, 'ABC', {role: 'annotation'}, 'Average'],
    ['Aug', 3754, '3754', 2089, '2089', 4000],
    ['Sept', 900, '900', 200, '200', 4000],
    ['Oct', 2000, '2000', 4900, '4900', 4000],
    ['Nov', 1700, '1700', 2200, '2200', 4000],
    ['Dec', 2400, '2400', 2089, '2200', 4000]
  ]);

  var options = {
    annotations: {
      textStyle: {
        fontSize: 10
      }
    },
    series: {
      0: {
        annotations: {
          stem: {
            length: 0
          },
        },
      },
      1: {
        annotations: {
          stem: {
            length: 16
          }
        },
      },
      2: {
        type: 'line'
      }
    },
    hAxis: {
      title: 'Time Period'
    },
    isStacked: true,
    seriesType: 'bars',
    title: 'Overview of the Tickets',
    vAxis: {
      title: 'Number of Tickets'
    }
  };

  var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

编辑

由于第三个注释需要作为其他两个堆栈的总和，
建议除了注释列之外，还添加系列值以表示总和

并将总和系列类型设置为'line'
这将确保总注释位于其余注释上方
只要图表上有足够的空间来显示注释在柱形图上方

为确保柱形图上方有足够的空间，请查找最大vAxis值，并添加一个值以创建足够的空间来放置注释
然后将该值设置为vAxis.viewWindow.max

如果需要，您可以关闭线条和点，并从图例中隐藏总和系列

根据我的经验，需要进行相当多的操作才能使复杂的Google图表显示得好看

请参见以下工作代码片段，其中包含第三个“总和”注释...

google.charts.load('current', {
  callback: drawStacked,
  packages: ['corechart']
});

function drawStacked() {
  var data = new google.visualization.arrayToDataTable([
    ['Time Period', 'XYZ', {role: 'annotation'}, 'ABC', {role: 'annotation'}, 'TOTAL', {role: 'annotation'}, 'Average'],
    ['Aug', 3754, '3,754', 2089, '2,089', 5843, '5,843', 4000],
    ['Sept', 900, '900', 200, '200', 1100, '1,100',  4000],
    ['Oct', 2000, '2,000', 4900, '4,900', 6900, '6,900',  4000],
    ['Nov', 1700, '1,700', 2200, '2,200', 3900, '3,900',  4000],
    ['Dec', 2400, '2,400', 2089, '2,089', 4489, '4,489',  4000]
  ]);

  // find max for all columns to set top vAxis number
  var maxVaxis = 0;
  for (var i = 1; i < data.getNumberOfColumns(); i++) {
    if (data.getColumnType(i) === 'number') {
      maxVaxis = Math.max(maxVaxis, data.getColumnRange(i).max);
    }
  }

  var options = {
    annotations: {
      textStyle: {
        fontSize: 10
      }
    },
    series: {
      0: {
        annotations: {
          stem: {
            length: 0
          },
        }
      },
      1: {
        annotations: {
          stem: {
            length: 2
          }
        }
      },
      2: {
        annotations: {
          stem: {
            color: 'transparent',
            length: 16
          }
        },
        color: 'black',
        lineWidth: 0,
        pointShape: 'square',
        pointSize: 0,
        type: 'line',
        visibleInLegend: false
      },
      3: {
        type: 'line'
      }
    },
    hAxis: {
      title: 'Time Period'
    },
    isStacked: true,
    seriesType: 'bars',
    title: 'Overview of the Tickets',
    vAxis: {
      title: 'Number of Tickets',
      viewWindow: {
        max: maxVaxis + 2000
      }
    }
  };

  var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

感谢@WhiteHat的回复。我需要额外的注释来显示第一个和第二个堆栈值的总和在柱形图的顶部。（前两个标签应该显示在堆栈内，总和值应该显示在柱形图的顶部）。你能帮我吗？ - Srikanth
非常感谢 @WhiteHat。 - Srikanth
3

我认为这是因为标签的垂直空间不足造成的。

试试这个：

  1. 保存图表中最高的值（我们称之为maxNumber）

  2. 在“选项”中将vAxis的最大值设置为maxNumber加上一点点。

我的图表中有4条水平线，所以我写了：

var options = {
                title: chartTitle,
                ....... //Your options
                vAxis: {
                    //Add more space in order to make sure the annotations are not overlapping
                    maxValue: maxNumber + maxNumber/4,
                },
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接