Question

我正在尝试使用YUI 3.3.0预览版本3 charting solution，因为它不再使用Flash，而是使用浏览器画布。到目前为止，我把这段代码放在一起（因为我是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"属性添加到我的dateRange x轴。

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

Answer 2

或者您可以尝试使用labelFunction

http://jhtmlcss.blogspot.com/2014/05/yui-3-using-custom-function-to-display.html

yui 3图表：如何在图表轴上格式化日期（YUI 3.3.0预览版本3）

2 个答案: