0

我正在使用jqPlotwithDateAxisRenderer来显示各种时间函数的图表。我想让图表与应用程序的其他模块进行通信，这些模块也处理时间数据（但不处理图表）。为此，所有模块将写入和读取相同的time变量（因此它们始终显示同一时刻的数据）。如果任何模块设置了变量，其他模块必须做出相应的反应。

示例：用户以可读格式输入时间，导致自定义刻度显示在图形中正确x坐标上的原因。

但是，要实现这一点，我需要在三种时间表示之间进行转换

  • 任何人类可读的格式（或Date作为其封装的 javascript 对象）
  • jqPlot内部用于表示时间的时间戳
  • x图中的坐标（以像素为单位）

我知道它DateAxisRenderer可以以可自定义的人类可读格式显示时间戳，就像它在渲染x-axis. 我知道点击图表后，我得到了事件信息中的时间戳（连同x坐标）。但我的问题是：如何明确地进行这些转换？.

4

1 回答 1

1

日期 <--> 人类可读的格式

Datejs很适合这个。例如：

var date = Date.parse('February 20th 1973');
var date = Date.parse('next thursday');

// Now let's convert a date into a human-readable string
var dateString = date.toString('dddd, MMMM d, yyyy');

日期 <--> jqPlot 时间戳

jqPlot 内部使用的时间戳只是Unix 时间（以毫秒为单位）：

var exampleTimestamp = 1345671839000;
var date = new Date(exampleTimestamp);

// Now let's convert a date into a timestamp
var jqPlotTimestamp = date.getTime();

日期 <--> x 坐标（以像素为单位）

假设您的 x 轴是线性的，您可以像这样确定 x 轴上一个点的值（填写您自己的值）：

var myPlot = jqplot(...);
var xAxis = myPlot.axes.xaxis;

var MARGIN_LEFT = 15; // Pixels from [left edge of chart --> minimum X value]

var pixelRange = 300; // Pixels from [min X value --> max X value]
var timeRange = xAxis.max - xAxis.min;

var time; // This will be our answer in the chart's units
time = xAxis.min + timeRange * (xCoordinate - MARGIN_LEFT) / pixelRange;

var timeInMillis = ... ; // Convert the X-Axis unit of time into millis
var date = new Date(timeInMillis);

// Now let's convert a date into an x coordinate
timeInMillis = date.getTime();
time = ...; // Convert millis into X-Axis unit of time
var x = MARGIN_LEFT + pixelRange * (time - xAxis.min) / timeRange;

在撰写本文时，这里是轴名称列表：

['yMidAxis', 'xaxis', 'yaxis', 'x2axis', 'y2axis', 'y3axis', 'y4axis', 'y5axis', 'y6axis', 'y7axis', 'y8axis', 'y9axis'];
于 2012-08-23T01:25:37.853 回答