使用日期列时，第一个和最后一个条被切成两半 [英] When using a date column, first and last bars are cut in half

问题描述

当我使用日期的列类型时，ColumnChart中的第一个和最后一个条被切成两半.它似乎是从中间条渲染的.它不会对非日期数据集执行此操作.

When I use a column type of date, the first and last bars in the ColumnChart are cut in half. It seems to be rendering from mid-bar. It doesn't do this with non-date sets of data.

是否有任何方法可以解决此问题，以便呈现完整的条形并带有一些额外的填充?

Is there any way to fix this so that the complete bars are rendered, with some extra padding?

http://jsfiddle.net/7tHVN/

推荐答案

我遇到了这个确切的问题(我的标签也很奇怪地未对齐)，这让我疯狂地试图解决它. hAxis.viewWindowMode通常可解决此类问题，但无法将其与日期值一起使用.

I had this exact problem (my labels were also weirdly misaligned) and it drove me crazy trying to figure it out. hAxis.viewWindowMode usually fixes issues like this, but it's not possible to use this with date values.

我最终要做的就是完全废弃日期类型，改为为该列指定string类型，然后将每个JS日期对象转换为字符串表示形式，然后再将其添加到DataTable中:

What I ended up doing was just scrapping the date type entirely, specifying the string type for that column instead, and converting each JS date object to a string representation before adding it to the DataTable, thusly:

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]]);
}

这将强制图表以离散轴而不是连续轴进行渲染，从而解决了切杆问题.只要您的数据和日期以均匀的间隔(一天一次，每周一次等)间隔开，并且您以正确的顺序传递它们，这种方法就可以起作用.

This forces the chart to render with a discrete rather than continuous axis, which fixes the cut-off bars problem. As long as your data and dates are spaced along even intervals (once a day, once a week, etc.) and you pass them in in the proper order, this approach should work.

Google Viz文档中提供了有关离散轴和连续轴的更多信息: https ://google-developers.appspot.com/chart/interactive/docs/customizing_axes

There's more info on discrete vs. continuous axes in the Google Viz docs: https://google-developers.appspot.com/chart/interactive/docs/customizing_axes

这篇关于使用日期列时，第一个和最后一个条被切成两半的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！