错误日期类型（Google可视化） [英] Error Date type (Google visualization)
问题描述
这是我用于显示图表的代码
$ scope.course_chart = function（response）{
var data2 = new google.visualization.DataTable（）;
data2.addColumn（'date'，'pv_date'）;
data2.addColumn（'string'，'pageviews'）;
_each（response.result.rows，function（item）{
var formattedDate = item [0] .slice（0，4）+，+ item [0] .slice（4，6）+，+ item [0] .slice（6，8）;
var date_format = new Date（formattedDate）;
date_format = $ filter（'date'）（date_format）;
data2.addRow（[
date_format，
item [1]
]）;
}）;
var chart = new google.visualization.AreaChart（document.querySelector（'＃course_chart'））;
chart.draw（data2，options2）;
};
google.load（'visualization'，'1'，{packages：['corechart']，callback：$ scope.course_chart}）;
我的日期格式值为 2016年9月27日
在Google可视化中，此数据类型date的需求输出是什么？
如果你有数据类型的列：'date'
，那么你必须传递一个日期对象 - > new Date ）
您可以使用任何javascript 日期构造函数
如...
新日期（2016，8，26）
记住在javascript中，月份为零（8 = 9月）
或...
新日期（'09 / 26/2016' ）
这会从字符串中创建日期，不会在显示时设置格式
<添加行到数据表...
data2.addColumn（'date pv_date）;
data2.addRow（new Date（2016，8，26））;
如果您已经将日期格式化，则可以在添加行时使用对象表示法
（ v =值， f =格式化值）...
data2.addRow（{
v：new Date（2016，8，26）
f：'Sep 26，2016'
} ）;
您也可以使用 DateFormat 由Google提供
data2.addRow（new Date（2016，8，26））;
var formatDate = new google.visualization.DateFormat（{
pattern：'MMM d，yyyy'
}）;
formatDate.format（data2，0）;
最后，您可以提供原始日期并让轴格式化日期
即 hAxis.format：'MMM d，yyyy' ...
这里有几个例子使用每个场景...
1 使用 hAxis.format
google.charts.load（'current'，{callback：function （）{var data2 = new google.visualization.DataTable（）; data2.addColumn（'date'，'pv_date'）; data2.addColumn（'number'，'pageviews'）; data2.addRows（[[new Date（ 2016，8，26），100]，[new Date（2016，8，27），101]]）; var options = {hAxis：{format：'MMM d，yyyy'}}; var chart = new google。 visualization.AreaChart（的document.getElementById（ 'chart_div'））; chart.draw（data2，options）;}，packages：['corechart']}）;
< script src =https://www.gstatic.com/charts/loader.js>< / script>< div id =chart_div>< / div>
使用b
$ b
DateFormat
google .charts.load（'current'，{callback：function（）{var data2 = new google.visualization.DataTable（）; data2.addColumn（'date'，'pv_date'）; data2.addColumn（'number'，'pageviews'）; data2.addRows（[[new Date（2016，8，26），100]，[new Date（2016，8，27），101]]）; var formatDate = new google.visualization.DateFormat（{pattern：'MMM d，yyyy'}）; formatDate.format（data2，0）; var chart = new google.visualization.AreaChart（document.getElementById（'chart_div'））; chart.draw（DATA2）; }，packages：['corechart']}）;
使用Object表示法 { v：，f：}
google。 charts.load（'current'，{callback：function（）{var data2 = new google.visualization.DataTable（）; data2.addColumn（'date'，'pv_date'）; data2.addColumn（'number'，'pageviews '）; data2.addRows（[[{v：new Date（2016，8，27），f：'Sep 26，2016'），100]，[{v： ：'Sep 27，2016'}，101]]）; var chart = new google.visualization.AreaChart（document.getElementById（'chart_div'））; c hart.draw（data2）;}，packages：['corechart']}）;
< script src =https://www.gstatic.com/charts/loader.js>< / script>< div id =chart_div>< / div> ;
同样，对于
AreaChart $ b ，第一行之后的列应该是类型：'number' - 不是'string'
This is my code for displaying the chart
$scope.course_chart = function(response){
var data2 = new google.visualization.DataTable();
data2.addColumn('date', 'pv_date');
data2.addColumn('string', 'pageviews');
_.each(response.result.rows, function(item){
var formattedDate = item[0].slice(0, 4) + ", " + item[0].slice(4, 6) + ", " + item[0].slice(6, 8);
var date_format = new Date(formattedDate);
date_format = $filter('date')(date_format);
data2.addRow([
date_format,
item[1]
]);
});
var chart = new google.visualization.AreaChart(document.querySelector('#course_chart'));
chart.draw(data2, options2);
};
google.load('visualization', '1', {packages:['corechart'], callback: $scope.course_chart});
My date_format value is Sep 27, 2016
what is the requirement output for this data type "date" in google visualization?
解决方案 if you have column with data type: 'date'
then you must pass a date object --> new Date()
you can use any of the javascript date contructors
such as...
new Date(2016, 8, 26)
remember in javascript, months are zero based (8 = Sept)
or...
new Date('09/26/2016')
this creates the date from a string and does not set the format when displayed
adding rows to the data table...
data2.addColumn('date', 'pv_date');
data2.addRow(new Date(2016, 8, 26));
if you already have the date formatted, you can use object notation when adding rows
(v = value, f = formatted value)...
data2.addRow({
v: new Date(2016, 8, 26)
f: 'Sep 26, 2016'
});
you can also use the DateFormat provided by google
data2.addRow(new Date(2016, 8, 26));
var formatDate = new google.visualization.DateFormat({
pattern: 'MMM d, yyyy'
});
formatDate.format(data2, 0);
finally, you can provide raw dates and let the axis format the dates
i.e. hAxis.format: 'MMM d, yyyy'...
here are a few examples using each scenario...
1. use hAxis.format
google.charts.load('current', {
callback: function () {
var data2 = new google.visualization.DataTable();
data2.addColumn('date', 'pv_date');
data2.addColumn('number', 'pageviews');
data2.addRows([
[new Date(2016, 8, 26), 100],
[new Date(2016, 8, 27), 101]
]);
var options = {
hAxis: {
format: 'MMM d, yyyy'
}
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data2, options);
},
packages:['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
2. use DateFormat
google.charts.load('current', {
callback: function () {
var data2 = new google.visualization.DataTable();
data2.addColumn('date', 'pv_date');
data2.addColumn('number', 'pageviews');
data2.addRows([
[new Date(2016, 8, 26), 100],
[new Date(2016, 8, 27), 101]
]);
var formatDate = new google.visualization.DateFormat({
pattern: 'MMM d, yyyy'
});
formatDate.format(data2, 0);
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data2);
},
packages:['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
3. use Object notation {v: , f:}
google.charts.load('current', {
callback: function () {
var data2 = new google.visualization.DataTable();
data2.addColumn('date', 'pv_date');
data2.addColumn('number', 'pageviews');
data2.addRows([
[{v: new Date(2016, 8, 26), f: 'Sep 26, 2016'}, 100],
[{v: new Date(2016, 8, 27), f: 'Sep 27, 2016'}, 101]
]);
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data2);
},
packages:['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
also, for AreaChart, the columns after the first should be of type: 'number' -- not 'string'
这篇关于错误日期类型（Google可视化）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
