Question

我对谷歌可视化非常陌生，所以我可能会做出明显错误的事情，但由于某种原因，在我的横轴上，它显示了日期，但是日期是近100年，当日期的时间框架最多只有两天。

我原以为图表会根据它的数据自动调整视图范围。这是真的？或者我必须硬编码最小值和最大值？

以下是它的内容：

以下是用于生成此代码的代码：

<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构造函数，以便了解要显示的范围。

另外，请注意，在4月份为Date构造函数提供03个月的结果 - 您希望3月份为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>

Google可视化折线图 - 新的日期（）显示轴上的100年

1 个答案: