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

Question

我将图表的列类型设置为datetime，并在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绘制图表的基础上，从过滤器的值

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

参见下列工作段中，图绘制时滑块是'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>