Google Chart API：折线图 - 图表日期与日期？答案

【问题标题】：Google Chart API : Line Chart - chart date against date?Google Chart API：折线图 - 图表日期与日期？
【发布时间】：2015-12-10 00:03:24
【问题描述】：

我在生成带有纵轴和横轴日期的 Google Chart API 折线图时遇到问题。生成的图表应如下所示：

这是一些试图产生这种效果的代码：

<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script>
    google.load("visualization", "1", {packages:["LineChart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
     var data = new google.visualization.DataTable();
        data.addColumn('date', 'Date');
        data.addColumn('date', 'Target');
        data.addColumn('date', 'Results');
        data.addRows([
    [new Date(2015, 1 ,1), new Date(2015, 3 ,1),new Date(2015, 4 ,1)],
[new Date(2015, 3 ,1), new Date(2015, 4 ,1),new Date(2007, 4 ,15)],
]);

        var options = {'vAxis': {format:'MMM d, y'}};

      var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, options);


    //     var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div'));
    //  chart.draw(data, {displayAnnotations: true});
      }

    </script>
    </head>
<body>
    <div id="chart_div" style="width: 300px; height: 240px;" ></div>


        </body>
    </html>

但生成的图表如下所示：

其中垂直轴显示的值与提供的日期值不对应。我曾尝试使用 vAxis.format 选项设置，但没有任何效果。

想知道垂直轴如何显示“Feb-2015”等？谢谢。

【问题讨论】：

我认为你必须在垂直轴上有数字，并用你的日期文本覆盖这些数字的显示。您不能绘制日期与日期图表。
感谢您的建议。我认为这是一个很好的方法，但最后我采用了 Vadim 建议的方法

标签： javascript date charts google-visualization

【解决方案1】：

由于你使用的是google.visualization.LineChart，所以需要加载corechart包：

google.load("visualization", "1", { packages: ["corechart"] });

之后您可以指定日期类型值：

var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('date', 'Target');
data.addColumn('date', 'Results');
data.addRows([
      [new Date(2015, 6, 1), new Date(2016, 2 ,1), new Date(2015, 11 ,1)],
      [new Date(2015, 7 ,1), new Date(2016, 1 ,1), new Date(2015, 11 ,1)],
      [new Date(2015, 8 ,1), new Date(2015, 11 ,1), new Date(2015, 11 ,1)],
]);

示例

google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);
function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('date', 'Date');
    data.addColumn('date', 'Target');
    data.addColumn('date', 'Results');
    data.addRows([
          [new Date(2015, 6, 1), new Date(2016, 2 ,1), new Date(2015, 11 ,1)],
          [new Date(2015, 7 ,1), new Date(2016, 1 ,1), new Date(2015, 11 ,1)],
          [new Date(2015, 8 ,1), new Date(2015, 11 ,1), new Date(2015, 11 ,1)],
    ]);



    var options = {
         hAxis: {
             format: 'MMM d, y', 
         }
    };

    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, options);
}

<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
<div id="chart_div" style="width: 480px; height: 320px;"></div>

【讨论】：