Question

当我使用列类型的日期时，ColumnChart中的第一个和最后一个条被切成两半。它似乎是从中间酒吧渲染。它没有使用非日期数据集来做到这一点。

有没有办法解决这个问题，以便使用一些额外的填充来渲染完整的条形图？

Answer 1

显然，设置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。

Answer 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

使用日期列时，第一个和最后一个条被切成两半

2 个答案: