javascript - 谷歌可视化折线图 - 新日期()在轴上显示 100 年

Question

我对 google visualization 很陌生，所以可能有一些明显的地方我做错了，但出于某种原因，它在我的水平轴上显示了日期，除了日期几乎是 100 年之久，当日期最多只有两天。

我本以为图表会根据它拥有的数据自动调整 View 范围。这是真的？还是我必须硬编码最小值和最大值？

这是它显示的内容:

下面是用于生成此代码的代码:

<script>
            google.charts.load('current', {packages: ['corechart', 'line']});

            function drawBasic() {

                var data = new google.visualization.DataTable();
                data.addColumn('date', 'Time');
                data.addColumn('number', 'Gain');
                data.addColumn({type: 'string', role: 'tooltip'});

                data.addRows([
                    [new Date(2018,03,23),665960845,'Friday, March 23, 2018 @ 2:33:23 am'],
                    [new Date(2018,03,23),665960845,'Friday, March 23, 2018 @ 3:43:38 am'],
                    [new Date(2018,03,23),665960845,'Friday, March 23, 2018 @ 3:43:50 am'],
                    [new Date(2018,03,23),665960845,'Friday, March 23, 2018 @ 3:47:47 am'],
                    [new Date(2018,03,23),665960845,'Friday, March 23, 2018 @ 3:48:43 am'],
                    [new Date(2018,03,23),665960845,'Friday, March 23, 2018 @ 3:48:53 am'],
                    [new Date(2018,03,23),665960845,'Friday, March 23, 2018 @ 3:49:29 am'],
                    [new Date(2018,03,23),665960845,'Friday, March 23, 2018 @ 3:49:44 am'],
                    [new Date(2018,03,23),665960845,'Friday, March 23, 2018 @ 3:57:59 am'],
                    [new Date(2018,03,23),665960845,'Friday, March 23, 2018 @ 3:59:26 am'],
                    [new Date(2018,03,23),666479192,'Friday, March 23, 2018 @ 5:08:06 am'],
                    [new Date(2018,03,23),666479192,'Friday, March 23, 2018 @ 6:13:59 pm'],
                    [new Date(2018,03,23),666781422,'Friday, March 23, 2018 @ 8:16:16 pm'],
                    [new Date(2018,03,23),666781422,'Friday, March 23, 2018 @ 8:55:16 pm'],
                    [new Date(2018,03,23),667196094,'Friday, March 23, 2018 @ 10:01:36 pm']
                ]);

                var options = {
                    title:'XP gains for the past " . ucfirst(replaceUnderscoreWithSpace(getRecordTimeframe($timeframe))) . "',
                    width: 800,
                    height: 600,
                    hAxis: {
                        title: 'Time',
                        gridlines: {
                            color: '#eee',
                            count: 15,
                        },
                        textStyle: {
                            color: '#eee',
                        },
                        baselineColor: '#eee',
                        format: 'M/d/yyyy',
                    },
                    vAxis: {
                        title: 'XP',
                        gridlines: {
                            color: '#eee',
                        },
                        textStyle: {
                            color: '#eee',
                        },
                        baselineColor: '#eee',
                    },
                    legend: 'none',
                    backgroundColor: {
                        fill: '#222',
                    },
                    titleTextStyle: {
                        color: '#fff', 
                        fontName: 'Open Sans',  
                        fontSize: 14,
                        bold: false,
                    },
                };

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

                chart.draw(data, options);
            }
            google.charts.setOnLoadCallback(drawBasic);
        </script>

我查看了 Date() 的文档，但找不到任何错误迹象。

任何帮助将不胜感激

Answer 1

问题是你所有的日期都是一样的，所以它不知道范围有多大。 (1 天？1 个月？70 年？)将不同 日期传递给 Date 构造函数，以便它了解要显示的范围。

另外，请注意，给 Date 构造函数一个 03 的月份会导致四月 - 您想要 02 表示三月。

google.charts.load('current', {packages: ['corechart', 'line']});

function drawBasic() {

  var data = new google.visualization.DataTable();
  data.addColumn('date', 'Time');
  data.addColumn('number', 'Gain');
  data.addColumn({type: 'string', role: 'tooltip'});

  data.addRows([
    [new Date(2018,02,23,2,33,23),665960845,'Friday, March 23, 2018 @ 2:33:23 am'],
    [new Date(2018,02,23,6,13,59),666479192,'Friday, March 23, 2018 @ 6:13:59 pm'],
    [new Date(2018,02,23,8,16,16),666781422,'Friday, March 23, 2018 @ 8:16:16 pm'],
  ]);

  var options = {
    title:'XP gains for the past " . ucfirst(replaceUnderscoreWithSpace(getRecordTimeframe($timeframe))) . "',
    width: 800,
    height: 600,
    hAxis: {
      title: 'Time',
      gridlines: {
        color: '#eee',
        count: 15,
      },
      textStyle: {
        color: '#eee',
      },
      baselineColor: '#eee',
      format: 'M/d/yyyy',
    },
    vAxis: {
      title: 'XP',
      gridlines: {
        color: '#eee',
      },
      textStyle: {
        color: '#eee',
      },
      baselineColor: '#eee',
    },
    legend: 'none',
    backgroundColor: {
      fill: '#222',
    },
    titleTextStyle: {
      color: '#fff', 
      fontName: 'Open Sans',  
      fontSize: 14,
      bold: false,
    },
  };

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

  chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawBasic);

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div">

</div>