组合水平条形图和股票图表(带导航器)HighCharts

时间:2014-07-23 18:34:02

标签: jquery highcharts highstock

我正在尝试创建一个包含两个部分的图表;顶部是一个水平条形图,显示左侧的类别。第二个较低的图形将是一个样条曲线图,显示右侧的值,两个图形将使用x轴的时间。

我正在尝试将HighStock图表格式化为: http://fiddle.jshell.net/revive/n4H8U/show/light/

这是我的WIP:http://jsfiddle.net/revive/g4KLk/

顶部类别栏将作为“指标”显示该类别在该时间段内是开启还是关闭。

The bottom section shows various speed measurements, over the same time frame.

而且,我试图使用HighStocks图表工作的原因是我需要底部的缩放/平移导航器:D

我非常感谢任何反馈意见,因为我已经在API中尽我所能了解我现在对它的理解......还在学习它!

谢谢!

修改

也许我最好定义我想要完成的最终结果,因为很有可能是更好的方法。

显然,我拥有的两个图表数据基于时间 - 它们都有一段时间内的数据点。

我需要的是让用户能够根据时间线查看图表。能够'放大'(因此希望在HighStocks中使用导航器),然后选择一个数据点作为'开始时间'而另一个选择为'结束时间',这样我们就可以根据新选择的时间返回其他数据帧。

这是一个实例:

  

假设您在2小时内录制了音频或视频,并附加了数据,以显示您的相机灯光,动作检测器,闪光灯等处于活动状态的时间/长度。使用此图表,您可以滚动数据(顶部图形显示代表相机灯状态的条形图,运动检测器等与时间相关,底部图形显示数据库中的声级 - 两个图表共享相同的时间表 - xAxis)。

     

这样,您可以使用导航器缩放到该2小时窗口内的特定时间范围..然后识别特定事件发生的时间(例如,运动检测器从1:33:00到1激活: 48:29)并且你想要“提取”这两个时间标记以供其他地方使用..

与大多数复杂的UI模式一样..这很难描述,但实际上很容易使用:D

1 个答案:

答案 0 :(得分:0)

与另一位开发人员(在JS API方面更精明)一起,我们能够整理出我们完成此任务所需的图表设置。您可以在此处查看完整的图表:

https://revivemarketing.makes.org/thimble/MzM2NzI0MjI0/wgv-uber-meta-data-graph