highchart通过点击并拖动鼠标来选择一个区域来显示一些信息，但不能释放 [英] highchart select an area to show some info by clicking and drag mouse but not release

问题描述

我目前正在研究高图，我希望实现一项功能，当您单击鼠标并将其拖动到图表上时，会出现一个工具提示，指出您选择的开始和结束日期（x轴）。

I am currently working on the highchart and I wish to implement a feature that when you click mouse and drag it over the chart, a tooltip will show up to indicate the start and end date (x-Axis) of your selection.

目前，我只能找到events.selection，但您需要通过触发此事件释放鼠标。有没有一种方法可以在不释放鼠标的情况下实现区域选择功能？

Currently, I can only find events.selection, but you need to release the mouse by triggering this event. Is there a way to achieve a "area selection" function without releasing mouse?

任何提示都将被赞赏！

感谢

推荐答案

更新当我在寻找我使用的插件时TorsteinHønsi）我得到了这个小提琴 http://jsfiddle.net/highcharts/AyUbx/

Update While I was looking for the plug-in I used( written by Torstein Hønsi) I got this fiddle http://jsfiddle.net/highcharts/AyUbx/

以下代码是我在plotOption中如何使用拖/放的示例

following code is an example how I used dragging/drop in plotOption

  plotOptions : {
                                    series : {
                                        cursor : 'ns-resize',
                                        point : {
                                            events : {

                                                drag : function(e) {

                                                    $('#drag')
                                                            .html(
                                                                    'Dragging <b>'
                                                                            + this.series.name
                                                                            + '</b>, <b>'
                                                                            + this.category
                                                                            + '</b> to <b>'
                                                                            + Highcharts
                                                                                    .numberFormat(
                                                                                            e.newY,
                                                                                            2)
                                                                            + '</b>');
                                                },
                                                drop : function() {
                                                    $('#drop')
                                                            .html(
                                                                    'In <b>'
                                                                            + this.series.name
                                                                            + '</b>, <b>'
                                                                            + this.category
                                                                            + '</b> was set to <b>'
                                                                            + Highcharts
                                                                                    .numberFormat(
                                                                                            this.y,
                                                                                            2)
                                                                            + '</b>');




                                                }
                                            }
                                        },
                                        stickyTracking : false
                                    },
                                    column : {
                                        stacking : 'normal'
                                    }
                                }

这篇关于highchart通过点击并拖动鼠标来选择一个区域来显示一些信息，但不能释放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！