停止在highcharts上重绘图表

Question

我有要求默认情况下绘制图表的位置。现在，我想通过单击容器外部的自定义按钮来添加水平线。但每次当我点击按钮时，图表都会重新绘制。

$('#container').highcharts('StockChart', {
    xAxis :{
        ordinal: false,
        minRange : 3600000,
    },
    yAxis : {
        ordinal: false,
    },
    chart: {
        events: {
            click: function(event) {
                var label=prompt('Label for Horizontal Line');
                if(label!=null)
                {
                    var chart = this.yAxis[0];
                    chart.addPlotLine({
                        value: event.yAxis[0].value,
                        dashStyle: 'shortdash',
                        color: '#'+(Math.random()*0xEEEEEE<<0).toString(16),
                        width: 2,
                        id: 'horzLine',
                        label : {
                            text : label
                        }
                    });
                }
            }
        },
    },
    series : [
        {
            //allowPointSelect : true,
            type : type,
            name : 'Stock Price',
            id: 'primary',
            data : onadata,
            tooltip: {
                valueDecimals: 5,
                crosshairs: true,
                shared: true
            },
            dataGrouping : {
                units : [
                    [ 'hour', [1, 2, 3, 4, 6, 8, 12] ],
                    [ 'day', [1] ],
                    [ 'week', [1] ],
                    [ 'month', [1, 3, 6] ],
                    [ 'year', [1] ]
                ]
            }
        },
    ]
});

$('#horizontal').click(function(e) { //button click
    //e.preventDefault();
    $('#container').highcharts('StockChart', {
        credits: {
            enabled : 0
        },
        rangeSelector : {
            buttons: [{
                type: 'month',
                count: 1,
                text: '1M'
            }, {
                type: 'month',
                count: 3,
                text: '3M'
            },{
                type: 'month',
                count: 6,
                text: '6M'
            },{
                type: 'all',
                text: 'All'
            }], 
            selected:3      
        },
        legend: {
            enabled: true,
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        },
        title : {
            text : 'Stock Price'
        },
        xAxis :{
            ordinal: false,
            minRange : 3600000,
        },
        yAxis : {
            ordinal: false,
        },
        chart: {
            events: {
                click: function(event) {
                    var label=prompt('Label for Horizontal Line');
                    if(label!=null)
                    {
                        var chart = this.yAxis[0];
                        chart.addPlotLine({
                            value: event.yAxis[0].value,
                            dashStyle: 'shortdash',
                            color: '#'+(Math.random()*0xEEEEEE<<0).toString(16),
                            width: 2,
                            id: 'horzLine',
                            label : {
                                text : label
                            }
                        });
                    }
                }
            },
        },
        series : [
            {
                type : type,
                name : 'Stock Price',
                id: 'primary',
                data : onadata,
                tooltip: {
                    valueDecimals: 5,
                    crosshairs: true,
                    shared: true
                },
                dataGrouping : {
                    units : [
                        [ 'hour', [1, 2, 3, 4, 6, 8, 12] ],
                        [ 'day', [1] ],
                        [ 'week', [1] ],
                        [ 'month', [1, 3, 6] ],
                        [ 'year', [1] ]
                    ]
                }
            },
        ] //series
    }); //chart
//return false;
});

Answer 1

好吧，在按钮的点击处理程序中，您正在重新绘制图表...

如果您只想在点击上添加一行，请将处理程序简化为：

$('#horizontal').click(function(e) { //button click
    var label=prompt('Label for Horizontal Line');
    if(label!=null)
    {
        var chart = Highcharts.charts[0];
        var yaxis = this.yAxis[0];
        yaxis.addPlotLine({
            value: yaxis.value,
            dashStyle: 'shortdash',
            color: '#'+(Math.random()*0xEEEEEE<<0).toString(16),
            width: 2,
            id: 'horzLine',
            label : {
                text : label
            }
        });
    }
});