jqplot使用日期轴渲染器缩放不正常

Question

我正在使用 jqPlot（版本1.0.2，我相信是 2012 年 7 月 25 日发布的版本）来呈现一天内各种数值的太阳能产量。当我缩放到一天中的某个部分时，往往会渲染出错误的图表区域。

以下是绘图选项--

    var plotOptions = {
    series: [{ showMarker:false} ],
    axes: {
        xaxis:{
            renderer:jQuery.jqplot.DateAxisRenderer,
            tickOptions:{
                formatString:'%R'
            },
            min: data[0].time * 1000,
            max: data[data.length - 1].time * 1000
        },
        yaxis: {
            tickOptions: {
                formatString: '%.3f'
            }
        }
    },
    highlighter: {
        show : true,
        sizeAdjust: 7.5
    },
    cursor: {
        show : true,
        zoom: true,
        showToolTip: false
    }
};

这些数据是电气系统的1分钟样本，当前的默认值为一个相位线上的交流电流（标准的北美电力系统 - 120/240伏交流电）。通常有1440个样本，每分钟一个。

我看到的情况是，我会选择一个区域，通常是4或6个小时，但放大后显示错误的数据部分。例如，如果我选择午夜到上午8点，我会看到4点到8点（或者如果我放大到8点之后一点，可能会看到9点），而不是正确的范围。这种情况相当一致，都是显示范围的后半部分，但也有无法预测的情况，数值可能缩得太近，让人看不清。

我已经尝试从示例中大量借鉴，但没有成功。我还尝试了限制我的数据集大小，但好像并没有什么帮助。

更新：我尝试将时间戳改成使用Date()对象，但效果不佳...

- Julie in Austin

---

自从我在使用jqplot进行缩放时遇到问题后，我转而使用了flot。尽管jqplot在视觉上更加丰富，但flot被证明更加可靠。 - Thomas C. G. de Vilhena

Thomas -- 看起来我必须这样做。除了“还没有答案！”的问题外，我猜flot可能是更好的选择。如果我沮丧地放弃了，我保证会接受你的“放弃jqPlot！”作为答案 ;) - Julie in Austin

@Thomas -- 我在stackoverflow上查看了许多其他jqPlot问题，发现有很多问题都没有答案。因此...看起来转换到flot是正确的答案... - Julie in Austin

既然没有人提供答案，那我最好把我的评论变成一个答案 ;) - Thomas C. G. de Vilhena

Answer 1

我遇到了同样的问题。虽然Flot也是一个很好的包，但我无法切换到它。我进行了一些调查，并在jqplot-users谷歌组中找到了这篇帖子，链接为this post，其中提供了答案。

简短的答案如下。src\plugins\jqplot.dateAxisRenderer.js中存在一个错误。该帖子表示解决方法是将dataAxisRenderer.js文件中以下内容注释掉。

min = new $.jsDate(min);
min = min.getTime() + min.getUtcOffset();

然而，我不确定如果。

min = new $.jsDate(min);
min = min.getTime();

是否必要，删除这个可能是一个坏主意。我没有注意到任何问题，但我认为我们可以保留这些行，只需删除min.getUtcOffset()即可。

- joe.dawley

---

就是这样！我使用了压缩后的JS文件，所以我不得不在jqplot.dateAxisRenderer.js中搜索getUtcOffset()，分割该行，然后注释掉有问题的代码来测试修复。 - Julie in Austin

Answer 2

并不是要低估jqPlot，它是一个用于构建视觉吸引力图表的很棒的插件，但我建议您也看看Flot，以构建带有缩放功能的图表。我已经尝试过两者，并发现Flot在这种需求方面更加可靠。

在使用Flot时，以下是配置DateTime轴的一些提示（来自Flot Reference）：

Flot中的时间序列支持基于JavaScript时间戳，您可以看到像这样的时间戳：

alert((new Date()).getTime())

在.NET中，您可以使用以下代码获取适当的时间戳：

public static int GetJavascriptTimestamp(System.DateTime input)
{
    System.TimeSpan span = new System.TimeSpan(System.DateTime.Parse("1/1/1970").Ticks);
    System.DateTime time = input.Subtract(span);
    return (long)(time.Ticks / 10000);
}

这个Stack Overflow问题讨论了一些时间格式。

- Thomas C. G. de Vilhena