javascript - 具有双轴断点和拖动点的 Highcharts

Question

我想制作带有双轴断点的图表并拖动该点，如下图所示。

有人可以告诉我我该怎么做吗？ 我探索了 highchart，但找不到合适的选项来创建它。 还有其他选择吗？

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>

我尝试了这个，仍然找到了一些帮助。

Answer 1

要绘制合适的背景，您需要使用Renderer并将三 Angular 形宽度渲染为适当的填充。

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();
}

在加载时设置绘图函数:

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

示例:https://jsfiddle.net/ec4ddj24/