하이 차트에서 차트 다시 그리기를 중지하십시오.

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