间隔列向谷歌折线图添加左/右填充

Question

我有一个烦人的问题。 我正在创建一个带有区域间隔的谷歌折线图。 一旦我赋予间隔列role: 'interval' ，图表就会在我的折线图中创建某种左右边界。 我怎样才能摆脱这个？

这是我的图表代码：

    chartType: 'LineChart',
    dataTable: {
      cols: [
        {type: 'date', label: 'datum'},
        {type: 'number', label: 'activatie'},
        {id: 'i0', type: 'number', p: {role: 'interval'}},
        {id: 'i1', type: 'number', p: {role: 'interval'}}
      ],
      rows: []
    },
    options: {
      height: 70,
      hAxis: {
        gridlines: {
          color: 'none'
        },
        format: 'd MMM',
        ticks: [],
        viewWindowMode: 'maximized'
      },
      vAxis: {
        minValue: 0,
        gridlines: {
          color: 'none'
        },
        baseline: { color: 'none' },
        textPosition: 'none'
      },
      chartArea: {
        width: '100%',
        height: 50,
        bottom: 20,
        left: 0,
        right: 0,
        backgroundColor: {
          fill: blauw1,
          fillOpacity: 0.05,
        }
      },
      backgroundColor: { fill: 'none' },
      legend: 'none',
      intervals: {style: 'area', color: blauw5},
      fontName: FONT_FAMILY,
      tooltip: { trigger: 'none' },
      pointsVisible: false,
      colors: [blauw1],
      areaOpacity: 0.0,
    }
  };```

This is how my chart look's like when the 2 interval-columns don't have the ```role: 'interval'``` added:

[without role: interval][1]

This is how my chart look's like when the 2 interval-columns have the ```role: 'interval'``` added:

[with role: interval][2]

  [1]: https://i.stack.imgur.com/zpT3D.png
  [2]: https://i.stack.imgur.com/0x3XG.png

Answer 1

而不是使用选项 --> hAxis.viewWindowMode: 'maximized'

使用数据中的最小和最大日期使用不同的视图窗口...

hAxis.viewWindow: data.getColumnRange(0)

请参阅以下工作片段...

 google.charts.load('current', { packages: ['corechart'] }).then(function () { var data = new google.visualization.DataTable({ cols: [ {type: 'date', label: 'datum'}, {type: 'number', label: 'activatie'}, {id: 'i0', type: 'number', role: 'interval'}, {id: 'i1', type: 'number', role: 'interval'} ], rows: [ {c:[{v: new Date(2020, 0, 27)}, {v: 10}, {v: 8}, {v: 12}]}, {c:[{v: new Date(2020, 0, 29)}, {v: 12}, {v: 10}, {v: 14}]}, {c:[{v: new Date(2020, 0, 31)}, {v: 14}, {v: 12}, {v: 16}]}, {c:[{v: new Date(2020, 1, 2)}, {v: 10}, {v: 8}, {v: 12}]} ] }); var chart = new google.visualization.ChartWrapper({ chartType: 'LineChart', containerId: 'chart', dataTable: data, options: { height: 70, hAxis: { gridlines: { color: 'none' }, format: 'd MMM', ticks: [], viewWindow: data.getColumnRange(0) }, vAxis: { minValue: 0, gridlines: { color: 'none' }, baseline: { color: 'none' }, textPosition: 'none' }, chartArea: { width: '100%', height: 50, bottom: 20, left: 0, right: 0, backgroundColor: { fill: 'cyan', fillOpacity: 0.05, } }, backgroundColor: { fill: 'none' }, legend: 'none', intervals: {style: 'area', color: 'blue'}, //fontName: FONT_FAMILY, tooltip: { trigger: 'none' }, pointsVisible: false, //colors: [blauw1], areaOpacity: 0.0, } }); chart.draw(); });

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