javascript - 具有日期时间类型列的静态 x 轴

Question

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

[屏幕截图 1]:

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

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

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

谢谢

Answer 1

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

你可以尝试调整bar.groupWidth和其他选项，但似乎从来没有工作

在 release notes ，他们提到他们...

Added options to specify bar.width, bar.gap, bar.group.width (was bar.groupWidth) and bar.group.gap.

这些似乎都不起作用

使用 Material 图表会更接近一些，但仍然在列之间显示许多日期

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

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

以下代码片段创建 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
  }]));

请参阅以下工作片段，当 slider 为 '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>