Goole Visualization DateRangeFilter数据问题。 2月至3月的数据冲突

时间:2016-05-30 14:39:18

标签: javascript google-visualization

当我选择第1个feb到28个feb之间的日期时,Google可视化显示3月而不是2月的数据。

Screenshot

下面的代码包含数据和控件以及图表包装器。

    google.load('visualization', '1', {packages:['corechart','controls','table'], callback:drawChart});

Js Fiddle Link

请帮我找到解决方案。

提前致谢。

3 个答案:

答案 0 :(得分:0)

尝试使用较新的库loader.js vs jsapi

似乎在这里工作正常......

google.charts.load('current', {
  callback: function () {
    var data = new google.visualization.DataTable();
    data.addColumn('date','OrderDate');
    data.addColumn('number','Order_Qty');
    data.addRows([
      [new Date(2014,0,1),100],
      [new Date(2014,0,3),120],
      [new Date(2014,0,30),110],
      [new Date(2014,1,1),170],
      [new Date(2014,1,10),180],
      [new Date(2014,1,25),110],
      [new Date(2014,2,1),170],
      [new Date(2014,2,14),170],
      [new Date(2014,2,20),170],
      [new Date(2014,3,12),170],
      [new Date(2014,3,16),170],
      [new Date(2014,3,13),170]
    ]);


    var table_Chart = new google.visualization.ChartWrapper({
      'chartType': 'Table',
      'containerId': 'table_div',
      'options': {},
      'view': {'columns':[0, 1]}
    });

    var slider_Date = new google.visualization.ControlWrapper({
        'controlType': 'DateRangeFilter',
        'containerId': 'filter_date_div_Date',
        'options': {
          'filterColumnIndex':'0'
        }
    });

    new  google.visualization.Dashboard(document.getElementById('dashboard_div'))
    .bind([slider_Date],[table_Chart])
    .draw(data);
  },
  packages: ['controls', 'table']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard_div">
  <div id="filter_date_div_Date"></div>
  <div id="table_div"></div>
</div>

答案 1 :(得分:0)

这是Google图表Date()处理中的错误。它现在由其开发人员修复。

Github: google / google-visualization-issues Chart data series shows up mis-aligned for all February data

答案 2 :(得分:0)

.clone()和.toDataTable()问题的短期解决方案与可视化的实时版本。

克隆用法:

上一篇:newDatatable = oldDatatable.clone();

now:newDatatable = cloneDataTable(oldDatatable);

<强> ToDatatableUsage:

上一篇:newDatatable = oldDataView.toDatatable();

now:newDatatable = convertDataViewToDataTable(oldDataView);

<强>功能

function cloneDataTable(dataTable) {
    var newDataTable = dataTable.clone();
    for (var c = 0; c < dataTable.getNumberOfColumns(); c++) {
        if (dataTable.getColumnType(c) == 'datetime' || dataTable.getColumnType(c) == 'date' ) {
            for (var r = 0; r < dataTable.getNumberOfRows() ; r++) {
                newDataTable.setValue(r, c, dataTable.getValue(r, c));
            }
        }
    }
    return newDataTable;
}

function convertDataViewToDataTable(dataView) {
    var newDataTable = dataView.toDataTable();
    for (var c = 0; c < dataView.getNumberOfColumns(); c++) {
        if (dataView.getColumnType(c) == 'datetime' || dataView.getColumnType(c) == 'date' ) {
            for (var r = 0; r < dataView.getNumberOfRows(); r++) {
                newDataTable.setValue(r, c, dataView.getValue(r, c));
            }
        }
    }
    return newDataTable;
}

希望这会有所帮助...... Ĵ