yui 3 chart: how to format dates in chart axis (YUI 3.3.0 Preview Release 3)
I'm trying to use the YUI 3.3.0 preview release 3 charting solution as it does not use Flash anymore but the browser canvas. So far I gobbled together this peace of code (as I’m new to YUI this is the mainly the result of copy and paste work from several examples found in the YUI 3 charting examples).
YUI().use('charts', function (Y)
{
var myDataValues = [
{category:"5/1/2010", values:2000},
{category:"5/2/2010", values:50},
{category:"5/3/2010", values:400},
{category:"5/4/2010", values:200},
{category:"5/5/2010", values:5000}
];
var myAxes 开发者_如何学运维= {
dateRange:{
keys:["date"],
position:"bottom",
type:"category",
styles:{
majorTicks:{
display: "none"
},
label: {
rotation:-45,
margin:{top:5}
}
}
}
};
var mychart = new Y.Chart({
dataProvider:myDataValues,
render:"#mychart",
categoryKey:"date",
categoryType:"time",
axes:myAxes
});
});
But I just can't find the examples or documentation on how to format the dates for this new YUI charting pre-release version. My question is:
How can I change the date format of the x-axis?
I got my answer on the YUI forum, I just had to add the type:"time"
and labelFormat: "%e %b %Y"
attributes to my dateRange
of x-axes.
YUI().use('charts', function (Y)
{
var myDataValues = [
{category:"5/1/2010", values:2000},
{category:"5/2/2010", values:50},
{category:"5/3/2010", values:400},
{category:"5/4/2010", values:200},
{category:"5/5/2010", values:5000}
];
var myAxes = {
dateRange:{
keys:["date"],
position:"bottom",
type:"time",
labelFormat: "%e %b %Y",
styles:{
majorTicks:{
display: "none"
},
label: {
rotation:-45,
margin:{top:5}
}
}
}
};
var mychart = new Y.Chart({
dataProvider:myDataValues,
render:"#mychart",
categoryKey:"date",
categoryType:"time",
axes:myAxes
});
});
For TimeAxis instances the labelFormat is an STRFTime string. For more information on STRFTime formatting see the following: http://pubs.opengroup.org/onlinepubs/007908799/xsh/strftime.html
Or you can try using labelFunction
http://jhtmlcss.blogspot.com/2014/05/yui-3-using-custom-function-to-display.html
精彩评论