javascript - 使用 Highcharts.js 的可拖动日期范围

标签 javascript svg charts highcharts

有谁知道可以在使用 Highcharts.js 创建的柱形图上使用任何拖动事件,或者甚至如何在图表上模拟该事件?

我们有一个拆分柱形图。较小的下方图表控制上方主图表上的日期范围。目前调整范围的唯一方法是单击并选择较小图表的部分。下图是我们目前所拥有的:

enter image description here

我们希望能够制作一个带有 handle 的可拖动界面,以任意方式拉伸(stretch)和调整片段。

Highstock.js 中有相同的功能(下面的屏幕截图): enter image description here

最佳答案

在 highcharts 中,您只能使用主从类型的图表 http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/dynamic-master-detail/

但是您可以使用 highstock.js 并在 navigator/serie 中使用柱形图。看例子

http://jsfiddle.net/UNBP7/

navigator:{
            series:{
                type:'column'
            }
        },

http://api.highcharts.com/highstock#navigator.series

关于javascript - 使用 Highcharts.js 的可拖动日期范围,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15543594/

相关文章:

javascript - 如何动态更改定向 d3.js 力布局上方向箭头的位置和大小?

javascript - 配置 SublimeLinter 以忽略尾随空格

javascript - 将数据加载到 SlickGrid 时如何获取加载程序?

javascript - 将 THREE.js 对象旋转转换为 Canvas 旋转

javascript - 在服务器-客户端往返期间存储(或传递)Element/TableCell 引用

javascript - jointjs:svg 文本在落到纸上时被空白替换

css - 在 HTML5 中可以使用类似于 photoshop 的混合模式吗?

csv - 如何将 csv 导入 chart.js?

html - 无法使用 SVG 绘制饼图

javascript - ChartJS : how to make a bar chart with a horizontal guideline: