Google图表，水平条形图布局问题

编程问答 2022-11-06

问题描述

我已经在我的角度项目中实现了Google图表，所有类型的图表都可以正常工作，但是水平条形图的条形与标签重叠。不知道发生了什么事。

HTML 

<div id="{{chartContainer}}" class="globalChart" [style.width.px]="chartWidth" [style.height.px]="chartHeight"></div>

TS 

function drawChart() {
      const wrapper = new google.visualization.ChartWrapper({
        containerId: tempChartId ? tempChartId : '',chartType: tempChartType,dataTable: tempChartData,options: {
          legend: { position: 'none' },seriesType: tempChartType === 'ComboChart' ? tempSeriesType : '',series: { 1: { type: tempChartType === 'ComboChart' ? tempSeriesType2 : '' } },pieHole: tempChartType === 'PieChart' && tempDonutHoleSize === 0  ? 0.88 : tempDonutHoleSize,pieSliceText: 'none',chartArea: {
            'width': tempChartAreaW ? tempChartAreaW + '%' : '80%','height': tempChartAreaH ? tempChartAreaH + '%' : '70%','left': tempChartType === 'PieChart' ? '' : tempYAxisspace ? tempYAxisspace : 50,'bottom': tempSpaceForLabels,'top': tempSpaceForLabels ? 25 : '',},areaOpacity: 0.04,colors: tempColors,bar: {
            groupWidth: tempBarWidth ? tempBarWidth : 25
          },candlestick: {
            fallingColor: { strokeWidth: 0,fill: '#2c7be5' },risingColor: { strokeWidth: 0,fill: '#2c7be5' }
          },vAxis: {
            // textPosition:  'none',gridlines: {
              color: tempGridColor ? tempGridColor : '#f8f8f8',count: tempgradeLines ? tempgradeLines : 3
            },textStyle: {
              color: tempyYaxisFontColor ? tempyYaxisFontColor : '#a6adb3',fontSize: tempYaxisFontSize ? tempYaxisFontSize : 9,bold: true,opacity: tempyYaxisFontOpacity ? tempyYaxisFontOpacity : 0.8,marginTop: '50',title: tempChartYTitle,titleTextStyle: {
              italic: false,color: tempychangeFontColorAxis ? tempychangeFontColorAxis : '#a6adb3',bold: false,fontSize: 10,marginBottom: 100,ticks: tempyAixsValues,minValue: 0,format: '0'
          },hAxis: {
            baselineColor: '#fff',gridlines: {
              color: 'transparent'
          },textPosition:  tempHideXaxisLable ? 'none' : '',textStyle: {
              color: '#a6adb3',fontSize: 9,opacity: 0.9,title: tempChartXTitle,axes: {
              x: {
                 0: {side: 'top'}
              }
           },isstacked: tempColumnChartStack ? tempColumnChartStack : false,tooltip: {
            trigger: grand_parent.jeopardyGraphCheck ? 'none' : '',isHtml: true
          },// annotations: {alwaysOutside: false},});

我为整个项目创建了通用图表组件，因此这就是TS文件有点复杂的原因。

问题截图

enter image description here

正常或预期行为

enter image description here

解决方法

我已经在Google图表选项中添加了isStacked=true，并且暂时解决了该问题，可能还存在其他更好的解决方案。但现在对我来说固定了。谢谢：）

google-chathtmljavascriptlayouttypescripttypescript