Интервальные столбцы добавляют отступы влево / вправо на график Google. - PullRequest
Новая
       9

Интервальные столбцы добавляют отступы влево / вправо на график Google.

2 голосов
/ 03 февраля 2020

У меня раздражающая проблема. Я создаю линейный график Google с интервалом площади. Как только я присваиваю столбцам-интервалам 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

1 Ответ

2 голосов
/ 03 февраля 2020

вместо использования опции -> 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>
...