当我使用列类型的日期时,ColumnChart中的第一个和最后一个条被切成两半。它似乎是从中间酒吧渲染。它没有使用非日期数据集来做到这一点。
有没有办法解决这个问题,以便使用一些额外的填充来渲染完整的条形图?
答案 0 :(得分:4)
显然,设置viewWindowMode确实适用于日期。将以下内容添加到我的图表选项中,其中min和max是第一个和最后一个日期值之前和之后的日期,至少对我有用。
'hAxis': {'viewWindowMode': 'explicit', 'viewWindow': {'max':new Date('2012-10-02'), 'min':new Date('2007-07-02')}}
另请参阅:Google论坛中的Column Chart crops the end bars。
答案 1 :(得分:2)
我有这个确切的问题(我的标签也奇怪地错位),它让我疯狂地想弄清楚。 hAxis.viewWindowMode
通常会修复此类问题,但无法将其与日期值一起使用。
我最终做的只是完全删除日期类型,而是指定该列的string
类型,并在将每个JS日期对象添加到DataTable
之前将其转换为字符串表示形式,正是如此:
data.addColumn('string', 'Date');
data.addColumn('number', 'Performance');
var dates = [new Date('2012-4-12'),
new Date('2012-4-13'),
new Date('2012-4-14')];
var performance = [59, 35, 86];
var dateString;
for (var i=0; i<dataForChart.length; i++) {
dateString = (dates[i].getMonth()+1)+'/'+ // JS months are 0-indexed
dates[i].getDate()+'/'+
dates[i].getYear();
data.addRow([dateString,
performance[i]]);
}
这会强制图表使用离散而非连续的轴进行渲染,从而修复了截止条问题。只要您的数据和日期按照均匀间隔(每天一次,每周一次等)间隔,并按正确顺序传递,这种方法应该有效。
Google Viz文档中关于离散轴与连续轴的更多信息:https://google-developers.appspot.com/chart/interactive/docs/customizing_axes