Question

我正在创建堆叠条形图，需要在堆栈内显示标签。但很少有品牌重叠。供参考image

你能帮我解决一下如何避免使用谷歌图表重叠吗？

<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

Answer 1

首先，您的数据中显示额外的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 configuration option进行调整

配置选项可用于整个图表，或仅用于特定系列

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.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>

Answer 2

我认为这是因为标签没有足够的垂直空间。

试试这个：

保存图表的最高值（让我们称之为maxNumber）
在＆＃34;选项＆＃34;将vAxis maxValue设置为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,
                },

如何避免谷歌条形图中栏上的重叠标签？

2 个答案: