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

Question

我的目标是显示一个图表，显示 Web 应用程序随时间使用的内存，最多 6 小时，滑动并定期刷新屏幕。该部分有效，但 X 轴的可能性很小：要么是标准刻度和标准刻度，要么是 labelFunc() 显示的愚蠢时间标签，在用户不友好的位置带有刻度。

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

据我所知，有两种方法可以解决我的问题：

我提供 labels 数组，dojo 在我说的必须添加的位置添加刻度。
或者，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

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

Better time ticks and axis labels in a dojo graph

javascript

dojo

xpages

dojox.charting