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