Question

我正在实现一个Highcharts线图，我需要能够拖动点以及更新图表的y轴。当我拖动一个点，然后更新y轴时，会从原始点绘制一条线到我拖动的位置：Here is a picture of what is happening.

我真的更喜欢没有所有这些垂直线，由于某种原因它似乎是重复点，因为我在测试时也会得到一些三角形。它只是离开了线但实际上没有更新点吗？要更新图表，我只是在做：

planChart.yAxis[0].max = newValueY;
$('.actualPlansPlot').highcharts(planChart);

非常感谢任何指导！

以下是代码的其余部分：

var values = [...my values];
planChart = {
    chart: {
        renderTo: 'container',
        animation: false
    },
    title: {
        text: ''
    },
    xAxis: {
        categories: startDates,
        crosshair: true,
    },
    yAxis: [{ // Primary yAxis
        labels: {
            format: '{value}',
            style: {
                color: '#20709e'
            }
        },
        title: {
            text: 'title',
            style: {
                color: '#20709e'
            }
        },
    }],

    plotOptions: {
        series: {
            point: {
                events: {

                    drag: function (e) {
                        // Returning false stops the drag and drops. Example:
                        /*
                        if (e.newY > 300) {
                            this.y = 300;
                            return false;
                        }
                        */

                        $('#drag').html(
                            'Dragging <b>' + this.series.name + '</b>, <b>' + this.category + '</b> to <b>' + Highcharts.numberFormat(e.y, 2) + '</b>');
                    },
                    drop: function () {
                        $('#drop').html(
                            'In <b>' + this.series.options.id + '</b>, <b>' + this.category + '</b> was set to <b>' + Highcharts.numberFormat(this.y, 2) + '</b>');
                    }
                }
            },
            stickyTracking: false
        },
        column: {
            stacking: 'normal'
        },
        line: {
            cursor: 'ns-resize'
        }
    },

    tooltip: {
        shared: true
    },

    credits: {
        enabled: false
    },

    series: [{
        name: 'title',
        tooltip: {
            pointFormat: '<span style="color:{point.color}">\u25CF</span> <b> {point.y} ' + trainingPlan.unit + '</b><br/>'
        },
        data: values,
        //draggableX: true,
        draggableY: true,
        dragMinY: 0,
        style: {
            color: '#20709e'
        }
    }]
}
$('.actualPlansPlot').highcharts(planChart);

这非常接近在线可拖动点的例子

Answer 1

<强>更新

使用以下代码：

$(document).on('click', '#updateYScale', function(e) {
var yValue = $('#newYValue')[0].value;    
        var chart =  $('.actualPlansPlot').highcharts();
        chart.yAxis[0].update({               
        max: yValue             
    });

  chart.redraw();
  });

请参阅演示fiddle with your issue's fix

更新Highcharts线图的Y轴会导致垂直线

1 个答案: