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

【问题标题】：Better time ticks and axis labels in a dojo graph道场图中更好的时间刻度和轴标签
【发布时间】：2020-04-13 11:51:20
【问题描述】：

我的目标是显示一个图表，该图表显示 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 图表轴上显示用户友好的刻度和时间的灵活方法吗？？

谢谢！

【问题讨论】：

图表的代码是什么？需要根据您要显示的信息在图表上定义最小值/最大值和刻度设置。
嗯，谢谢你的推动，保罗。添加最小值和最大值时，它的表现要好得多。我想我懒得去阅读文档了，dojo 做的比我预期的要多。完成后我会发布代码。再次感谢！

标签： javascript dojo xpages dojox.charting

【解决方案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

【讨论】：