1

我正在尝试使用 YUI 3.3.0 预览版 3图表解决方案，因为它不再使用 Flash，而是使用浏览器画布。到目前为止，我狼吞虎咽地整理了这段代码（因为我是 YUI 的新手，这主要是从YUI 3 图表示例中找到的几个示例中复制和粘贴工作的结果）。

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 轴的日期格式？

4

2 回答 2

3

我在YUI 论坛上得到了答案，我只需要将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

于 2011-01-15T22:54:43.970 回答
0

或者您可以尝试使用 labelFunction

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

于 2014-05-20T14:52:27.927 回答