Диаграмма yui 3: как форматировать даты на оси диаграммы (YUI 3.3.0 Preview Release 3) - PullRequest
Новая
       29

Диаграмма yui 3: как форматировать даты на оси диаграммы (YUI 3.3.0 Preview Release 3)

1 голос
/ 09 января 2011

Я пытаюсь использовать YUI 3.3.0 Preview Release 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?

Ответы [ 2 ]

3 голосов
/ 16 января 2011

Я получил ответ на форуме 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

0 голосов
/ 20 мая 2014

Или вы можете попробовать использовать labelFunction

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

...