Google图表-将组合图数据最大程度地左右对齐

问题描述

我有一个包含面积，条形图和折线图的组合图。我希望面积图和折线图最大程度地对齐到左侧和右侧。对于条形图，则不需要。不幸的是，我无法正确对齐图形。我遍历了文档，找不到解决我问题的方法。

当前图表：

预期图表：

这是图表的GoogleChartInterface对象（我正在添加dataTable并动态滴答）：

{
  chartType: 'ComboChart',dataTable: [],options: {
    focusTarget: 'category',animation: {
      startup: true,easing: 'out',duration: 500,},height: '160',chartArea: {
      width: '90%',height: '79%',vAxes: {
      0: {
        titlePosition: 'none',textStyle: {
          color: '#febd02',bold: true,fontSize: 13,format: '#',gridlines: {
          color: '#eaeaea',count: '5',interpolateNulls: true,1: {
        titlePosition: 'none',gridlines: {
          color: 'transparent'
        },2: {
        groupWidth: '100%',titlePosition: 'none',textStyle: {
          color: '#0284ff',format: 'decimal',hAxis: {
      textStyle: {
        color: '#393939',format: 'EEEE',gridlines: {
        count: 0,color: 'transparent'
      },ticks: [],series: {
      0: {
        targetAxisIndex: 0,type: 'area',1: {
        type: 'line'
      },2: {
        targetAxisIndex: 2,type: 'bars',dataOpacity: 0.5,colors: [
      '#febd02','#a5a5a5','#0284ff',],bar: {
      groupWidth: '35'
    },legend: {
      position: 'none'
    },};

解决方法

为了将面积和线系列延伸到图表的边缘，
我们必须首先使用将呈现连续x轴的数据类型。
在这种情况下，我们将使用日期时间。

接下来，我们使用选项hAxis.viewWindow控制系列的开始和结束位置。
viewWindow有两个属性，min和max。
min和max的值应与x轴的数据类型匹配。
在这种情况下，我们将值设置为系列应开始和结束的日期。

hAxis: {
  viewWindow: {
    min: new Date(2020,10,13),max: new Date(2020,19)
  }
}

这会将系列扩展到图表的边缘。

有关示例，请参见以下工作片段...

google.charts.load('current',{
  packages: ['controls','corechart']
}).then(function() {
  var data = google.visualization.arrayToDataTable([
    ['Date','y0','y1','y2'],[new Date(2020,100,50,25],14),110,45,5],15),90,40,60],16),80,30,10],17),70,20,0],18),60,19),5,0]
  ]);

  var chart = new google.visualization.ChartWrapper({
    chartType: 'ComboChart',containerId: 'chart',dataTable: data,options: {
      focusTarget: 'category',animation: {
        startup: true,easing: 'out',duration: 500,},chartArea: {
        left: 60,top: 12,right: 60,bottom: 72,height: '100%',width: '100%'
      },width: '100%',vAxes: {
        0: {
          titlePosition: 'none',textStyle: {
            color: '#febd02',bold: true,fontSize: 13,format: '#',gridlines: {
            color: '#eaeaea',count: '5',interpolateNulls: true,1: {
          titlePosition: 'none',gridlines: {
            color: 'transparent'
          },2: {
          groupWidth: '100%',titlePosition: 'none',textStyle: {
            color: '#0284ff',format: 'decimal',hAxis: {
        textStyle: {
          color: '#393939',format: 'dd MMM. yyyy',gridlines: {
          color: 'transparent'
        },ticks: data.getDistinctValues(0),viewWindow: data.getColumnRange(0)
      },series: {
        0: {
          targetAxisIndex: 0,type: 'area',1: {
          type: 'line'
        },2: {
          targetAxisIndex: 2,type: 'bars',dataOpacity: 0.5,colors: [
        '#febd02','#a5a5a5','#0284ff',],bar: {
        groupWidth: '35'
      },legend: {
        position: 'none'
      },});
  chart.draw();
});

html,body {
  height: 100%;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
}

#chart {
  min-height: 160px;
  height: 100%;
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>