道场图中更好的时间刻度和轴标签

Question

我的目标是显示一个图形，该图形显示Web应用程序在一段时间（最多6个小时）内使用的内存，并定期滑动并刷新屏幕。该部分有效，但X轴的可能性很小：标准刻度和标准刻度，或labelFunc（）显示的无聊的时间标签，刻度在用户不友好的位置。

我想在图像中显示适当的时间，例如12:40:00 12:50:00等，但是似乎没有办法实现。 Dojo似乎在描述刻度线是什么，它们的距离应该是多少以及何时打印标签。

正如我所看到的，有两种方法可以解决我的问题：

1. [我提供了labels数组，并且dojo在必须说的位置添加了刻度线。
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"}]

[不幸的是，dojo并不遵循，它在决定必须放置标签并且相应的值不在数组中时，只是跳过labels数组中的值。如果可以定义数组为前导，那就太好了。

有人知道在dojox图表轴上显示用户友好的价格和时间的灵活方法吗？

谢谢！

Answer 1

确实，如Paul所说，解决方案确实是增加最小和最大，但是我还必须设置刻度线步长，所以我将相关的刻度线或多或少地放在逻辑上。

<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>

如您所见，我的代码基于最初由Julian Buss开发的yn_ui_charts控件。我添加了一些参数以简化刻度设置等，并创建了一个简单的函数，该函数根据图像中的秒数为我定义刻度步长。

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;
}

输出样本：

QED