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 フォーラムで回答を得たので、x 軸にtype:"time"とlabelFormat: "%e %b %Y"属性を追加するだけで済みました。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

于 2011-01-15T22:54:43.970 に答える
0

Or you can try using labelFunction

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

于 2014-05-20T14:52:27.927 に答える