谷歌甘特图显示错误的年份

Jit*_*tra 3 javascript google-visualization

我已经开始使用谷歌最近推出的甘特图,它看起来非常适合通过图表跟踪任务。

我创建了 4 个任务并且图表加载正常,但它在开发产品和发布部分显示错误的日期,例如 2016 年 1 月。实际上我根本没有在我的数据中使用这个日期。这里有什么问题?

在此处输入图片说明

这是我的代码:

HTML:

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
Run Code Online (Sandbox Code Playgroud)

JavaScript:

google.charts.load('current', {'packages':['gantt']});
google.charts.setOnLoadCallback(drawChart);

function daysToMilliseconds(days) {
  return days * 24 * 60 * 60 * 1000;
}

function drawChart() {

  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Task ID');
  data.addColumn('string', 'Task Name');
  data.addColumn('date', 'Start Date');
  data.addColumn('date', 'End Date');
  data.addColumn('number', 'Duration');
  data.addColumn('number', 'Percent Complete');
  data.addColumn('string', 'Dependencies');

  data.addRows([
    ['Design', 'Design and analysis',
     new Date(2015, 8, 1), new Date(2015, 8, 15), null, 25,  null],
    ['Development', 'Develop the product',
     new Date(2015, 8, 16), new Date(2015, 10, 31), null, 20, null],
    ['Testing', 'Product testing',
     new Date(2015, 11, 01), new Date(2015, 11, 30), null, 10, null],
    ['Release', 'Release the product',
     new Date(2015, 12, 01), new Date(2015, 12, 20), null, 0, null],
  ]);

  var options = {
    height: 275
  };

  var chart = new google.visualization.Gantt(document.getElementById('chart_div'));

  chart.draw(data, options);
}
Run Code Online (Sandbox Code Playgroud)

Whi*_*Hat 6

月份数字在 JavaScript 中从零开始

所以 2015 年 12 月 1 日将是 --> new Date(2015, 11, 01)

相反,12将日期推至 2016 年 1 月 1 日

请参阅以下片段...

日期测试

console.log(new Date(2015, 11, 01));
console.log(new Date(2015, 12, 01));
Run Code Online (Sandbox Code Playgroud)

图表测试

如果范围应该是 8 月 - 12 月,那么每个月 # 减少 1

    google.charts.load('current', {'packages':['gantt']});
    google.charts.setOnLoadCallback(drawChart);

    function daysToMilliseconds(days) {
      return days * 24 * 60 * 60 * 1000;
    }

    function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Task ID');
      data.addColumn('string', 'Task Name');
      data.addColumn('date', 'Start Date');
      data.addColumn('date', 'End Date');
      data.addColumn('number', 'Duration');
      data.addColumn('number', 'Percent Complete');
      data.addColumn('string', 'Dependencies');

      data.addRows([
        ['Design', 'Design and analysis',
         new Date(2015, 7, 1), new Date(2015, 7, 15), null, 25,  null],
        ['Development', 'Develop the product',
         new Date(2015, 7, 16), new Date(2015, 9, 31), null, 20, null],
        ['Testing', 'Product testing',
         new Date(2015, 10, 01), new Date(2015, 10, 30), null, 10, null],
        ['Release', 'Release the product',
         new Date(2015, 11, 01), new Date(2015, 11, 20), null, 0, null],
      ]);

      var options = {
        height: 275
      };

      var chart = new google.visualization.Gantt(document.getElementById('chart_div'));

      chart.draw(data, options);
    }
Run Code Online (Sandbox Code Playgroud)
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
Run Code Online (Sandbox Code Playgroud)