带有日期时间类型列的静态 x 轴

Question

我将图表的列类型设置为日期时间，它添加了不必要的日期，在 x 轴之间有大空间，并将列的大小减小到几乎不可见。

[屏幕截图 1]：

如果我将列更改为字符串类型，并将数据替换为字符串，那么我会得到这个 [屏幕截图 2]：

是否有一个选项可以在 x 轴上排除与时间相关的距离？基本上，我希望 x 轴表现得好像它仍然是一个字符串类型。我想要条形之间的静态距离并保留日期时间类型，因为我需要它来设置过滤器。

有人对我如何实现这一点有任何想法吗？

谢谢

Answer 1

日期不能很好地与ColumnChart 配合使用

您可以尝试调整bar.groupWidth 和其他选项，但似乎永远不会工作

在release notes 中，他们提到他们已经...

添加了用于指定 bar.width、bar.gap、bar.group.width（原为 bar.groupWidth）和 bar.group.gap 的选项。

这些似乎都不起作用

使用材料图表更接近一点，但仍然在列之间显示许多日期

但如果你喜欢type: 'string' 的图表外观

您可以使用DataView 根据过滤器中的值绘制图表

下面的 sn-p 创建一个DataView,
将第一列转换为 'string',
并根据过滤器中选择的值过滤数据

  var range = slider.getState();

  var dataView = new google.visualization.DataView(slider.getDataTable());

  dataView.setColumns([{
    calc: 'stringify',
    sourceColumn: 0,
    type: 'string'
  }, 1, 2]);

  dataView.setRows(dataTable.getFilteredRows([{
    column: 0,
    minValue: range.lowValue,
    maxValue: range.highValue
  }]));

参见下面的工作 sn-p，当滑块为 'ready' 和 'statechange' 时绘制图表

google.charts.load('current', {
  callback: function () {
    var dataTable = new google.visualization.DataTable({
      cols: [
        {label: 'Date', type: 'date'},
        {label: '+', type: 'number'},
        {label: '-', type: 'number'},
      ],
      rows: [
        {c:[{v: new Date(2016, 2, 13)}, {v: null}, {v: -100}]},
        {c:[{v: new Date(2016, 3, 18)}, {v: 50}, {v: null}]},
        {c:[{v: new Date(2016, 4, 21)}, {v: 50}, {v: null}]},
        {c:[{v: new Date(2016, 5, 20)}, {v: null}, {v: -200}]},
        {c:[{v: new Date(2016, 6, 23)}, {v: 50}, {v: null}]},
        {c:[{v: new Date(2016, 7, 12)}, {v: 100}, {v: null}]},
        {c:[{v: new Date(2016, 8, 28)}, {v: 200}, {v: null}]},
        {c:[{v: new Date(2016, 8, 28)}, {v: null}, {v: -1000}]}
      ]
    });

    var options = {
      title: 'Transaction Chart'
    };

    var slider = new google.visualization.ControlWrapper({
      controlType: 'DateRangeFilter',
      containerId: 'filter_div',
      dataTable: dataTable,
      options: {
        filterColumnIndex: 0,
        ui: {
          format: {pattern: 'yyyy-MM-dd'}
        }
      }
    });

    google.visualization.events.addListener(slider, 'ready', drawChart);
    google.visualization.events.addListener(slider, 'statechange', drawChart);

    slider.draw();

    function drawChart() {
      var range = slider.getState();

      var dataView = new google.visualization.DataView(slider.getDataTable());
      dataView.setColumns([{
        calc: 'stringify',
        sourceColumn: 0,
        type: 'string'
      }, 1, 2]);
      dataView.setRows(dataTable.getFilteredRows([{
        column: 0,
        minValue: range.lowValue,
        maxValue: range.highValue
      }]));

      var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
      chart.draw(dataView, options);
    }
  },
  packages: ['controls', 'corechart']
});

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