Google Chart API：折线图 - 图表日期与日期？
Posted
技术标签:
【中文标题】Google Chart API：折线图 - 图表日期与日期？【英文标题】：Google Chart API : Line Chart - chart date against date? 【发布时间】：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 建议的方法 【参考方案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>【讨论】：
以上是关于Google Chart API：折线图 - 图表日期与日期？的主要内容，如果未能解决你的问题，请参考以下文章
折线图上的 Google Chart API 无效 JSON 字符串