谷歌图表范围过滤器控制的日期格式

I have a page that displays data using LineChart with a ChartRangeFilter control.

我有一个页面，使用带有ChartRangeFilter控件的LineChart来显示数据。

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['controls', 'charteditor']});
google.setOnLoadCallback(drawChart);

function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('date', 'X');
    data.addColumn('number', 'Y1');
    data.addColumn('number', 'Y2');

    for (var i = 0; i < 12; i++) {
        data.addRow([new Date(2016, i,1), Math.floor(Math.random() * 200), Math.floor(Math.random() * 200)]);
    }

    var dash = new google.visualization.Dashboard(document.getElementById('dashboard'));

    var control = new google.visualization.ControlWrapper({
        controlType: 'ChartRangeFilter',
        containerId: 'control_div',
        options: {
            filterColumnIndex: 0,
            ui: {
                chartOptions: {
                    height: 50,
                    width: 600,
                    chartArea: {
                        width: '80%'
                    }
                },
                chartView: {
                    columns: [0, 1]
                }
            }
        }
    });

    var chart = new google.visualization.ChartWrapper({
        chartType: 'LineChart',
        containerId: 'chart_div'
    });
    function setOptions (wrapper) {
        wrapper.setOption('width', 620);
        wrapper.setOption('chartArea.width', '80%');
    }

    setOptions(chart);

    dash.bind([control], [chart]);
    dash.draw(data);
    google.visualization.events.addListener(control, 'statechange', function () {
        var v = control.getState();
        document.getElementById('dbgchart').innerHTML = v.range.start+ ' to ' +v.range.end;
        return 0;
    });
}
</script>

<div id="dashboard">
    <div id="chart_div"></div>
    <div id="control_div"></div>
    <p><span id='dbgchart'></span></p>
</div>

And here's a working JSFiddle.

这是一个工作的JSFiddle。

Here the control starts from Jan 1. When I change start range to Jan 2, the graph date starts to show from Feb. I could not identify the reason for this. Can anyone help me in this? In the end range it is working fine it seems.

这里的控件从1月1日开始。当我将起始范围更改为1月2日时，图形日期从2月开始显示，我无法确定原因。在这件事上有人能帮我吗?在最后阶段，它似乎运行得很好。

2 个解决方案

#1

In this example, on 'statechange' -- the value for the begin and end months, for the selected chart range, are modified to ensure data points are plotted.
The chart is then redrawn with updated options.

在本例中，在“statechange”上——对所选图表范围的开始和结束月的值进行修改，以确保绘制了数据点。然后用更新的选项重新绘制图表。

google.charts.load('44', {
  callback: drawChart,
  packages: ['controls', 'corechart']
});

function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('date', 'X');
    data.addColumn('number', 'Y1');
    data.addColumn('number', 'Y2');

    data.addRow([new Date(2016,  0, 1), 1,123]);
    data.addRow([new Date(2016,  1, 1), 6,42 ]);
    data.addRow([new Date(2016,  2, 1), 4,49 ]);
    data.addRow([new Date(2016,  3, 1), 23,486 ]);
    data.addRow([new Date(2016,  4, 1), 89,476 ]);
    data.addRow([new Date(2016,  5, 1), 46,444 ]);
    data.addRow([new Date(2016,  6, 1), 178,442 ]);
    data.addRow([new Date(2016,  7, 1), 12,274 ]);
    data.addRow([new Date(2016,  8, 1), 123,4934 ]);
    data.addRow([new Date(2016,  9, 1), 144,4145 ]);
    data.addRow([new Date(2016, 10, 1), 135,946 ]);
    data.addRow([new Date(2016, 11, 1), 178,747 ]);

    var control = new google.visualization.ControlWrapper({
        controlType: 'ChartRangeFilter',
        containerId: 'control_div',
        options: {
            filterColumnIndex: 0,
            ui: {
                chartOptions: {
                    height: 50,
                    width: 600,
                    chartArea: {
                        width: '80%'
                    }
                }
            }
        }
    });

    var chart = new google.visualization.ChartWrapper({
        chartType: 'LineChart',
        containerId: 'chart_div',
        options: {
          width: 620,
          chartArea: {
            width: '80%'
          },
          hAxis: {
            format: 'MMM',
            slantedText: false,
            maxAlternation: 1
          }
        }
    });

    function setOptions() {
        var firstDate;
        var lastDate;
        var v = control.getState();

        if (v.range) {
          document.getElementById('dbgchart').innerHTML = v.range.start + ' to ' + v.range.end;
          firstDate = new Date(v.range.start.getTime() + 1);
          lastDate = new Date(v.range.end.getTime() - 1);
          data.setValue(v.range.start.getMonth(), 0, firstDate);
          data.setValue(v.range.end.getMonth(), 0, lastDate);
        } else {
          firstDate = data.getValue(0, 0);
          lastDate = data.getValue(data.getNumberOfRows() - 1, 0);
        }

        var ticks = [];
        for (var i = firstDate.getMonth(); i <= lastDate.getMonth(); i++) {
          ticks.push(data.getValue(i, 0));
        }

        chart.setOption('hAxis.ticks', ticks);
        chart.setOption('hAxis.viewWindow.min', firstDate);
        chart.setOption('hAxis.viewWindow.max', lastDate);
        if (dash) {
          chart.draw();
        }
    }

    setOptions();
    google.visualization.events.addListener(control, 'statechange', setOptions);

    var dash = new google.visualization.Dashboard(document.getElementById('dashboard'));
    dash.bind([control], [chart]);
    dash.draw(data);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard">
    <div id="chart_div"></div>
    <div id="control_div"></div>
    <p><span id='dbgchart'></span></p>
</div>

#2

It is because you only have one value for January (1st the jan) and when you set the start range to jan 2 the next value in your data if for Feb 1st.

因为1月只有一个值(1月1日)，当您将开始范围设置为1月2时，数据中的下一个值(如果是2月1日)。

The month value for month in the data object is zero-based.

数据对象中的月值为零。

#1