0

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

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,
              bold: true,
              opacity: 0.9,
              marginTop: '50',
            },
            title: tempChartXTitle,
            titleTextStyle: {
              italic: false,
              color: tempychangeFontColorAxis ? tempychangeFontColorAxis : '#a6adb3',
              fontSize: 10,
              bold: false,
            },
            axes: {
              x: {
                 0: {side: 'top'}
              }
           },
          },
          isStacked: tempColumnChartStack ? tempColumnChartStack : false,
          tooltip: {
            trigger: grand_parent.jeopardyGraphCheck ? 'none' : '',
            isHtml: true
          },
          // annotations: {alwaysOutside: false},
        },

      });

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

问题截图 在此处输入图像描述

正常或预期行为 在此处输入图像描述

4

1 回答 1

0

我已经添加isStacked=true了谷歌图表选项，我现在解决了这个问题，可能还有更好的解决方案存在。但它现在对我来说是固定的。谢谢 ：）

于 2020-08-19T09:55:54.773 回答