如何在Google折线图中按年份分隔日期 [英] How to Seperate Dates by Year in Google Line Chart
问题描述
我有一个列表日期/值我喜欢显示在 Google Charts：折线图。
I've got a list of dates/values i like to display in a Google Charts: Line Chart.
data.addRows([
[new Date("2011-02-01T15:18:21+00:00"), 21.77],
[new Date("2011-03-01T15:18:59+00:00"), 20.96],
//[...],
[new Date("2011-12-01T07:54:15+00:00"), 17.04],
[new Date("2012-01-01T10:29:00+00:00"), 20.43],
[new Date("2012-02-01T08:03:00+00:00"), 22.51],
[new Date("2012-03-01T08:07:00+00:00"), 26.75],
//[...],
[new Date("2013-01-02T16:16:00+00:00"), 20.7],
[new Date("2013-02-03T13:51:00+00:00"), 24.41],
[new Date("2013-03-01T08:06:00+00:00"), 25.44],
//[...],
[new Date("2014-01-01T10:19:00+00:00"), 16.24],
[new Date("2014-02-01T10:16:00+00:00"), 19.13],
[new Date("2014-03-01T08:05:00+00:00"), 17.68],
[new Date("2014-04-01T08:11:00+00:00"), 10.97]
//[...],
按年分隔值例如每年一行来比较它们。如何设置 x轴范围而不使用年份？
This works fine, but i like to seperate the values by year e.g. one line per year to compare them. How can I set the x-axis range without the year?
这是 result 我喜欢实现，这只有如果我假的所有年份都一样。
This is the result i like to achieve, this works only if i fake all years to be the same.
推荐答案
我相信你需要一个离散的轴。但每个日期是唯一的，因此结果是每个数据点是轴上的离散点。所以诀窍是强制连续轴和格式化修复。因此，通过创建一个视图，第一列是一个数字月。通过将0-11个月转换为刻度值并强制每一个刻度来修复格式。现在你可以保留日期的原始值。
I believe that you desire a discrete axis. However each date is unique so the result is that each data point is a discrete point on the axis. So the trick is to force a continuous axis and fix with formatting. So you do this by creating a view with the first column being a numeric month. Fix the format by translating 0-11 months to tick values and forcing every one tick. Now you can preserve the dates in original value.
顺便说一下，这是我怎么做几乎所有的图表：1）使用数据表排序行2）使用数据视图对行和列进行过滤，并生成衍生值。 3）使用选项完成和/或抽象信息的显示。
And by the way, this is how I do almost all of my charts: 1) Use the data table to sort the rows 2) use the data view to filter on rows and columns and generate derivative values. 3) Use options to finish and/or abstract the presentation of the information.
<div>
<div id='testchart'></div>
<script type="text/javascript">
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', '2011');
data.addColumn('number', '2012');
data.addColumn('number', '2013');
data.addColumn('number', '2014');
data.addRows([
[new Date("2011-02-01T15:18:21+00:00"), 21.77, null, null, null],
[new Date("2011-03-01T15:18:59+00:00"), 20.96, null, null, null],
[new Date("2011-04-01T15:19:22+00:00"), 15.75, null, null, null],
[new Date("2011-05-01T15:19:44+00:00"), 6.92, null, null, null],
[new Date("2011-06-01T08:12:00+00:00"), 4.46, null, null, null],
[new Date("2011-07-06T07:54:00+00:00"), 2.54, null, null, null],
[new Date("2011-08-01T15:30:21+00:00"), 2.96, null, null, null],
[new Date("2011-09-01T15:30:35+00:00"), 2.94, null, null, null],
[new Date("2011-10-01T15:30:58+00:00"), 3.3, null, null, null],
[new Date("2011-11-01T15:31:37+00:00"), 10.72, null, null, null],
[new Date("2011-12-01T07:54:15+00:00"), 17.04, null, null, null],
[new Date("2012-01-01T10:29:00+00:00"), null, 20.43, null, null],
[new Date("2012-02-01T08:03:00+00:00"), null, 22.51, null, null],
[new Date("2012-03-01T08:07:00+00:00"), null, 26.75, null, null],
[new Date("2012-04-01T12:58:04+00:00"), null, 13.09, null, null],
[new Date("2012-05-01T12:58:59+00:00"), null, 13.52, null, null],
[new Date("2012-06-01T08:09:00+00:00"), null, 4.71, null, null],
[new Date("2012-07-01T13:00:06+00:00"), null, 3.92, null, null],
[new Date("2012-08-01T08:02:00+00:00"), null, 2.85, null, null],
[new Date("2012-09-01T09:52:18+00:00"), null, 3.05, null, null],
[new Date("2012-10-01T17:13:00+00:00"), null, 4.2, null, null],
[new Date("2012-11-01T10:03:00+00:00"), null, 10.79, null, null],
[new Date("2012-12-01T10:52:00+00:00"), null, 16.68, null, null],
[new Date("2013-01-02T16:16:00+00:00"), null, null, 20.7, null],
[new Date("2013-02-03T13:51:00+00:00"), null, null, 24.41, null],
[new Date("2013-03-01T08:06:00+00:00"), null, null, 25.44, null],
[new Date("2013-04-01T09:58:00+00:00"), null, null, 23.15, null],
[new Date("2013-05-01T20:26:00+00:00"), null, null, 12.13, null],
[new Date("2013-06-01T13:19:00+00:00"), null, null, 6.77, null],
[new Date("2013-07-01T18:09:00+00:00"), null, null, 4.26, null],
[new Date("2013-08-23T14:32:00+00:00"), null, null, 2.67, null],
[new Date("2013-09-01T09:41:00+00:00"), null, null, 3.25, null],
[new Date("2013-10-01T12:42:14+00:00"), null, null, 5.2, null],
[new Date("2013-11-01T12:43:17+00:00"), null, null, 8.95, null],
[new Date("2013-12-01T12:43:38+00:00"), null, null, 17.02, null],
[new Date("2014-01-01T10:19:00+00:00"), null, null, null, 16.24],
[new Date("2014-02-01T10:16:00+00:00"), null, null, null, 19.13],
[new Date("2014-03-01T08:05:00+00:00"), null, null, null, 17.68],
[new Date("2014-04-01T08:11:00+00:00"), null, null, null, 10.97],
[new Date("2014-05-01T09:06:00+00:00"), null, null, null, 6.57],
[new Date("2014-07-01T07:57:00+00:00"), null, null, null, 4.25],
[new Date("2014-08-03T11:26:00+00:00"), null, null, null, 2.14],
[new Date("2014-09-02T08:04:00+00:00"), null, null, null, 2.95],
[new Date("2014-10-01T07:18:00+00:00"), null, null, null, 3.75]
]);
var dView = new google.visualization.DataView(data);
dView.setColumns([
{calc:getmon, type:'number', label:"Month"}
,1
,2
,3
,4]);
function getmon(dataTable, rowNum){
var rd = dataTable.getValue(rowNum, 0);
var rm = rd.getMonth();
return {v:rm};
}
var options = {
hAxis: {
title: 'Month'
,showTextEvery: 1
,ticks: [{v:0, f:'Jan'}, {v:1, f:'Feb'}, {v:2, f:'Mar'}, {v:3, f:'Apr'}, {v:4, f:'May'}, {v:5, f:'Jun'}, {v:6, f:'Jul'}, {v:7, f:'Aug'}, {v:8, f:'Sep'}, {v:9, f:'Oct'}, {v:10, f:'Nov'}, {v:11, f:'Dec'}]
}
}
var chart = new google.visualization.LineChart(document.getElementById('testchart'));
chart.draw(dView, options);
}
drawChart();
</script>
这篇关于如何在Google折线图中按年份分隔日期的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
