Лучшее время тиков и меток осей в графике додзё

Question

Моя цель - отобразить график, показывающий объем памяти, используемой веб-приложением, в течение не более 6 часов, скольжение и регулярное обновление экрана sh. Эта часть работает, но возможности для оси X скудны: либо стандартная шкала и стандартные отметки, либо глупые метки времени, отображаемые labelFun c (), с отметками в недружественных для пользователя позициях.

Я хотел бы показать правильное время на изображении, например 12:40:00 12:50:00 и т. Д. c., Но, похоже, нет способ достичь этого. Кажется, Додзё описывает, что такое галочки, каково их расстояние и когда печатается этикетка.

На мой взгляд, у меня может быть два пути решения моей проблемы:

1. Я предоставляю массив labels, и додзё добавляет тики, где я говорю, что они должны быть.
2. Или, dojo получает два новых свойства (для каждой оси): startDate и endDate, поэтому он может просто сам вычислять тики.

Алгоритм вычисления значений и временных рядов не так уж и сложен, мне удалось это сделать:

labels:[{"value":21,"text":"12:20:00 PM"},{"value":121,"text":"12:30:00 PM"},{"value":221,"text":"12:40:00 PM"},{"value":321,"text":"12:50:00 PM"},{"value":421,"text":"1:00:00 PM"},{"value":521,"text":"1:10:00 PM"},{"value":621,"text":"1:20:00 PM"}]

К сожалению, додзё не следует этому примеру, оно просто пропускает значения в массиве labels, когда он решит, что должен поместить метку, а соответствующее значение не находится в массиве. Было бы здорово, если бы можно было определить, что массив является ведущим.

Кто-нибудь знает о гибком способе отображения удобных для пользователя тиков и времени на оси диаграммы dojox ??

Спасибо!

Answer 1

Действительно, как сказал Пол, было решение добавить мин и макс, но мне также пришлось установить шаги тиков, чтобы я располагал соответствующие тики более или менее логично.

<xc:yn_ui_charts charttheme="BlueDusk" tooltips_enabled="false" charttype="Lines" width="1200" height="400" axisXMax="#{javascript:new Date().getTime()/1000}"
    axisXMin="#{javascript:SystemData.getLogStartDate().getTime()/1000}">
    <xc:this.dataSeries>
        <xp:value>#{javascript:SystemData.getUsageDataXY()}</xp:value>
    </xc:this.dataSeries>
    <xc:this.axisXLabelScript><![CDATA[var date= new Date(+xvalue*1000); return date.toLocaleTimeString();]]></xc:this.axisXLabelScript>
    <xc:this.axisXTickSteps><![CDATA[#{javascript:getTickSteps()}]]></xc:this.axisXTickSteps>
    <xc:this.axisXTicks><![CDATA[#{javascript:[true, true, true]}]]></xc:this.axisXTicks>
</xc:yn_ui_charts>

Как вы видите, я основал свой код на элементе управления yn_ui_charts, изначально разработанном Джулианом Буссом. Я добавил несколько параметров, чтобы упростить настройки тиков и т. Д. c., И я создаю простую функцию, которая определяет шаги тиков для меня в зависимости от количества секунд на изображении.

function getTickSteps() {
    var limits= [1, 10, 20, 30, 60, 120, 300, 600, 1200, 1800, 3600, 7200, 10800, 21600];
    var start= Math.floor(SystemData.getDiskLogStartDate().getTime()/1000);
    var end= Math.floor(new java.util.Date().getTime()/1000);
    var seconds= end-start;
    var ticks= 10;
    var span= Math.floor(seconds/ticks);
    for(var l= limits.length-1; l>=0; l--)
        if(span>limits[l])
            break;
    var steps= [];
    if(l<limits.length-1)
        steps.push(limits[l+1]);
    if(l>=0)
        steps.push(limits[l]);
    if(l>0)
        steps.push(limits[l-1]);
    return steps;
}

An Выходная выборка:

QED