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

问题描述

我有一个包含面积、条形图和折线图的组合图。我希望面积图和折线图最大限度地与左侧和右侧对齐。对于条形图，它不是必需的。不幸的是，我无法正确对齐图表。我浏览了文档，但找不到解决问题的方法。

当前图表：

预期图表：

这是图表的 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',
        format: '#',
        gridlines: {
          color: 'transparent'
        },
        interpolateNulls: true,
      },
      2: {
        groupWidth: '100%',
        titlePosition: 'none',
        textStyle: {
          color: '#0284ff',
          bold: true,
          fontSize: 13,
        },
        format: 'decimal',
        gridlines: {
          color: 'transparent'
        },
      },
    },
    hAxis: {
      textStyle: {
        color: '#393939',
        bold: true,
        fontSize: 13,
      },
      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'
    },
  },
};

标签： javascriptchartsgoogle-visualizationng2-google-chart

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

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

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

这会将系列拉伸到图表的边缘。

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

google.charts.load('current', {
  packages: ['controls', 'corechart']
}).then(function() {
  var data = google.visualization.arrayToDataTable([
    ['Date', 'y0', 'y1', 'y2'],
    [new Date(2020, 10, 13), 100, 50, 25],
    [new Date(2020, 10, 14), 110, 45, 5],
    [new Date(2020, 10, 15), 90, 40, 60],
    [new Date(2020, 10, 16), 80, 30, 10],
    [new Date(2020, 10, 17), 70, 20, 0],
    [new Date(2020, 10, 18), 60, 10, 0],
    [new Date(2020, 10, 19), 50, 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%'
      },
      height: '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',
          format: '#',
          gridlines: {
            color: 'transparent'
          },
          interpolateNulls: true,
        },
        2: {
          groupWidth: '100%',
          titlePosition: 'none',
          textStyle: {
            color: '#0284ff',
            bold: true,
            fontSize: 13,
          },
          format: 'decimal',
          gridlines: {
            color: 'transparent'
          },
        },
      },
      hAxis: {
        textStyle: {
          color: '#393939',
          bold: true,
          fontSize: 13,
        },
        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>

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

问题描述

解决方案

推荐阅读