Javascript 谷歌图表API：折线图-图表日期对日期？_Javascript_Date_Charts_Google Visualization

Javascript 谷歌图表API：折线图-图表日期对日期？

javascript date charts google-visualization

Javascript 谷歌图表API：折线图-图表日期对日期？,javascript,date,charts,google-visualization,Javascript,Date,Charts,Google Visualization,我在生成一个在纵轴和横轴上都有日期的GoogleChartAPI折线图时遇到了问题。生成的图表应如下所示：这是一些试图产生这种效果的代码： <html> <head> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script> google.load("visualization", "1", {packages:[

我在生成一个在纵轴和横轴上都有日期的GoogleChartAPI折线图时遇到了问题。生成的图表应如下所示：

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

<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>


load（“可视化”、“1”，{packages:[“LineChart”]}）；
setOnLoadCallback（drawChart）；
函数绘图图（）{
var data=new google.visualization.DataTable（）；
data.addColumn（'date'，'date'）；
data.addColumn（'date'，'Target'）；
data.addColumn（“日期”、“结果”）；
data.addRows([
[新日期（2015年1月1日）、新日期（2015年3月1日）、新日期（2015年4月1日）]，
[新日期（2015年3月1日）、新日期（2015年4月1日）、新日期（2007年4月15日）]，
]);
变量选项={'vAxis'：{格式：'mmmd，y'}；
var chart=new google.visualization.LineChart（document.getElementById（'chart_div'））；
图表绘制（数据、选项）；
//var chart=new google.visualization.AnnotatedTimeLine（document.getElementById（'chart_div'））；
//draw（数据，{displayAnnotations:true}）；
}

但最终的图表如下所示：

其中垂直轴显示的值与提供的日期值不对应。我尝试过使用

vAxis.format

选项设置，但没有任何效果

想知道垂直轴如何显示“2015年2月”等？谢谢。

因为您使用的是

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（“可视化”，“1”，“{packages:[“corechart”]}）；
setOnLoadCallback（drawChart）；
函数绘图图（）{
var data=new google.visualization.DataTable（）；
data.addColumn（'date'，'date'）；
data.addColumn（'date'，'Target'）；
data.addColumn（“日期”、“结果”）；
data.addRows([
[新日期（2015年6月1日）、新日期（2016年2月1日）、新日期（2015年11月1日）]，
[新日期（2015年7月1日）、新日期（2016年1月1日）、新日期（2015年11月1日）]，
[新日期（2015年8月1日）、新日期（2015年11月1日）、新日期（2015年11月1日）]，
]);
变量选项={
哈克斯：{
格式：“MMM d，y”，
}
};
var chart=new google.visualization.LineChart（document.getElementById（'chart_div'））；
图表绘制（数据、选项）；
}

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