我在生成 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 选项设置，但没有任何效果。
想知道垂直轴如何显示“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("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>关于javascript - 谷歌图表 API : Line Chart - chart date against date?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34191395/