Highcharts中的可拖动十字准线

Question

我正在开发一个使用 Highcharts.js 作为图表库的网络应用程序。在 Highcharts 的折线图中，您可以在将鼠标悬停在图表中的某个点时获得工具提示。您还可以在同一点获得十字准线（垂直线）。

我想要的是一种始终显示十字准线并且用户可以水平拖动的方法。应为十字准线所在的点显示工具提示。这使得用户可以“保存”图表中的位置，以便在用户不再悬停图表时它不会消失。工具提示仅应显示在十字准线所在的位置，而不应在用户将鼠标悬停在图表的其他区域时显示。

有谁知道这在 Highcharts 中是否可行？

Answer 1

您可以使用the draggable points plugin 并创建a custom symbol for a bubble marker。

JSFiddle demo

// Define a custom symbol path
Highcharts.SVGRenderer.prototype.symbols.crosshair = function (x,y,w,h,elem) {
		var ret = [],
    		chart;
    if (elem.element) {
    	chart = elem.element.farthestViewportElement.parentElement.id.split('-');
      chart = Highcharts.charts[chart[chart.length - 1]];
      ret = [
      	'M', x, 0,
        'L', x, chart.plotHeight
      ];
    }
    return ret;
};
if (Highcharts.VMLRenderer) {
    Highcharts.VMLRenderer.prototype.symbols.crosshair = Highcharts.SVGRenderer.prototype.symbols.crosshair;
}

var chart = new Highcharts.Chart({

    chart: {
        renderTo: 'container',
        animation: false
    },
    
    title: {
        text: 'Highcharts draggable points demo'
    },

    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    plotOptions: {
        series: {
            stickyTracking: false
        },
        line: {
            cursor: 'ns-resize'
        },
        bubble: {
            cursor: 'move'
        }
    },

    
    tooltip: {
      formatter: function() {
        if (this.point.series.userOptions.noTooltip) return false;

        var tooltip = this.series.chart.tooltip;
        return tooltip.defaultFormatter.call(this, tooltip);
      }
    },

    series: [ {
        data: [0, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4].reverse(),
        type: 'column',
        minPointLength: 2
    }, {
        data: [0, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
        draggableY: true
    }, {
    		noTooltip: true,
        data: [[10,10,10]],
        draggableX: true,
        dragMinX: 0,
        dragMaxX: 11,
        maxSize: 1,
        minSize: 1,
        type: 'bubble',
        marker: {
        	symbol: 'crosshair',
          lineWidth: 2,
          states: {
          	hover: {
            	enabled: false
            }
          }
        },
        minPointLength: 2,
        showInLegend: false
    }]

});

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="https://rawgithub.com/highslide-software/draggable-points/master/draggable-points.js"></script>
<div id="container" style="height: 400px"></div>