具有日期時間類型列的靜態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>