javascript - yui 3 图表 : how to format dates in chart axis (YUI 3. 3.0 预览版 3)

Question

我正在尝试使用 YUI 3.3.0 预览版 3 charting solution因为它不再使用 Flash，而是使用浏览器 Canvas 。到目前为止，我把这些和平的代码拼凑在一起(因为我是 YUI 的新手，这主要是从 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
    });
});

但是我找不到关于如何为这个新的 YUI 图表预发布版本设置日期格式的示例或文档。我的问题是:

如何更改 x 轴的日期格式？

Answer 1

我在 YUI forum 上得到了答案，我只需将 type:"time" 和 labelFormat: "%e %b %Y" 属性添加到 x 的 dateRange -轴。

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

对于 TimeAxis 实例，labelFormat 是一个 STRFTime 字符串。有关 STRFTime 格式的更多信息，请参阅以下内容: http://pubs.opengroup.org/onlinepubs/007908799/xsh/strftime.html