How to avoid overlapping label's on the Bar in

2019-01-19 22:33发布

站内问答 / 移动开发
1958 2 6

I'm creating a stacked bar graph and need to show the label inside the stack. But Few of the label's are getting overlapped. for reference image

Can you please help me how to avoid overlapping using 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>

Regards, Srikanth

2条回答
再贱就再见
2楼-- · 2019-01-19 23:13

first, it appears you have an extra annotation column in your data,
that doesn't appear to belong to a specific column

copied from question above...

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
  ],
  ...
]);

this could be part of the reason it's so cluttered

regardless, use the annotations configuration option for adjustments

the config option can be used for the entire chart, or just for a specific series 

var options = {
  // entire chart
  annotations: {
    textStyle: {
      fontSize: 10
    }
  },
  series: {
    0: {
      // series 0
      annotations: {
        stem: {
          length: 0
        },
      },
    },
    1: {
      // series 1
      annotations: {
        stem: {
          length: 16
        }
      },
    },
  }
  ...
};

specifically, you can use a combination of annotations.textStyle.fontSize and annotations.stem.length to prevent overlapping

see following working snippet...

annotations.textStyle.fontSize is reduced for the entire chart
this allows the first annotation on the second column to fit within the bar

annotations.stem.length is set to zero (0) on the first series,
and 16 on the second...

(the extra annotation from the question has been removed)

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>

EDIT

since the third annotation is needed as the total of the other two stacks,
recommend adding the series value for the total, in addition to the annotation column

and setting the total series type to 'line'
this will place the total annotation above the rest, for sure
so long as there is enough room on the chart to display the annotation above the bars

to ensure enough room above bars, find the max vAxis value, and add a value that will create enough room for the annotation
then set that value as vAxis.viewWindow.max

you can turn off the line and point, and hide the total series from the legend if needed

in my experience, it takes quite a bit of manipulation to get a complex google chart to display nicely

see the following working snippet, which incorporates the third, 'total', annotation... 

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>

查看更多
0人赞 添加讨论(0) 举报
贪生不怕死
3楼-- · 2019-01-19 23:21

I think it happens because there's not enough vertical space for the labels.

Try this:

  1. Save the highest value of the graph (let's call it maxNumber)

  2. In the "options" set vAxis maxValue to be maxNumber plus a little more.

I have 4 horizontal lines in my graph so I wrote:

var options = {
                title: chartTitle,
                ....... //Your options
                vAxis: {
                    //Add more space in order to make sure the annotations are not overlapping
                    maxValue: maxNumber + maxNumber/4,
                },
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)