Highchart mit Dual-Achsen-Haltepunkt und Ziehpunkt

Question

Ich möchte Diagramm mit Dual-Achsen-Haltepunkt machen und diesen Punkt ziehen, wie Sie in den folgenden Bildern können.

Kann mir bitte jemand sagen, wie kann ich das tun? Ich erkunde highchart, konnte aber keine geeigneten Optionen finden, um dies zu erstellen. Gibt es noch andere Optionen?

var seriesOptions = [], 
 
    names = ['MSFT']; 
 
$(document).ready(function(e) { 
 
    // Start the standard Highcharts setup 
 
    $.each(names, function(i, name) { 
 
     seriesOptions[i] = { 
 
      data: [0,20, 40, 60] 
 
     }; 
 
     createChart(); 
 
    }); 
 
}); 
 

 
// create the chart when all data is loaded 
 
function createChart() { 
 
    $('#container').highcharts('StockChart', { 
 
     chart: { 
 
      backgroundColor: "#40aa98" 
 
     }, 
 
     credits: {enabled: false}, 
 
     rangeSelector: {enabled: false}, 
 
     navigator: { enabled: false}, 
 
     scrollbar: {enabled: false}, 
 
     yAxis: { 
 
      min:0, 
 
      max:60, 
 
      labels: { 
 
       align: 'right', 
 
       formatter: function() { 
 
        return '$' + this.value + 'k'; 
 
       }, 
 
       x:-5, 
 
       y:-2 
 
      }, 
 
      opposite:false, 
 
      gridLineWidth: 0, 
 
      gridZIndex: 0, 
 
      minorGridLineColor: "#fff", 
 
      minorGridLineWidth: 2, 
 
      minorTickColor: "#fff", 
 
      plotLines: [{ 
 
       value: 20, 
 
       width:3, 
 
       color: '#fff' 
 
      }] 
 
     }, 
 
     xAxis: { 
 
      min:0, 
 
      max:60, 
 
      crosshair: { 
 
       color: '#006753', 
 
       dashStyle: "Solid", 
 
       snap: true, 
 
       width:4, 
 
       zIndex: 2, 
 
      } 
 
     }, 
 
     legend: { 
 
      enabled: true, 
 
      floating: true, 
 
      align: 'left', 
 
      verticalAlign: 'top', 
 
      y: 10, 
 
      labelFormat: '<span style="color:#fff">{name}</span>: <b>{point.y:.2f} USD</b> ({point.change:.2f}%)<br/>', 
 
      borderWidth: 0 
 
     }, 
 
     plotOptions: { 
 
      series:{ 
 
       marker:{ 
 
        enabled: false, 
 
        fillColor: '#ef188d', 
 
        width: 20, 
 
        radius: 10, 
 
        height: 20, 
 
        lineColor: "#006753", 
 
        lineWidth: 2 
 
        
 
       }, 
 
       
 
      } 
 
     }, 
 
     
 
     series: seriesOptions 
 
    }); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="http://code.highcharts.com/stock/highstock.src.js"></script> 
 
<script src="https://rawgithub.com/highslide-software/value-in-legend/master/value-in-legend.js"></script> 
 
<div id="container" style="height: 400px; width: 600px; margin:auto"></div>

habe ich versucht, diese und noch etwas Hilfe zu finden.

Answer 1

Um den richtigen Hintergrund zu zeichnen, müssen Sie Renderer verwenden und machen ein Dreieck die richtige Füllung Breite.

function drawBackground() { 
    var xAxis = this.xAxis[0]; 
    var yAxis = this.yAxis[0]; 

    var x1 = this.plotLeft, 
    y1 = yAxis.toPixels(20), 
    y2 = this.plotTop + this.plotHeight; 

    var crossPoint = [xAxis.toPixels(20), y1]; 

    var pathUnder = this.renderer.path([ 
    'M', x1, y1, 
    'L', crossPoint[0], crossPoint[1], 
    'L', x1, y2, 
    'Z' 
    ]).attr({ 
    'stroke-width': 0, 
    fill: '#145F28' 
    }).add(); 

    var x2 = x1 + this.plotWidth; 

    var pathBeyond = this.renderer.path([ 
    'M', crossPoint[0], y1, 
    'L', x2, y1, 
    'L', x2, this.plotTop, 
    'Z' 
    ]).attr({ 
    'stroke-width': 0, 
    fill: '#64EF88' 
    }).add(); 
} 

die Zeichenfunktion auf Last eingestellt:

chart: { 
    backgroundColor: "#40aa98", 
    events: { 
    load: drawBackground 
    } 
}, 

Beispiel: https://jsfiddle.net/ec4ddj24/

Answer 2

Ich glaube, Sie sind für dieses Plugin suchen

http://www.highcharts.com/plugin-registry/single/3/Draggable%20Points