그래프 중간에 추가 점

Question

안녕하세요 저는 기본 그래프 라이브러리로 하이 차트를 사용하고 있습니다. 하이 차트 API 문서에 따라 포인트를 동적으로 그래프에 추가하고 싶습니다. addPoint 메소드를 사용해야합니다. 이 방법을 사용하려고 시도했지만 모든 시도에서 그래프는 시리즈의 중간이 아닌 시리즈의 끝 부분에 항상 포인트를 추가했습니다. 자신의 API 문서에 따르면

:

후 렌더링 시간을 시리즈로 한 점을 추가합니다. 포인트는 마지막에 추가하거나 시리즈의 시작 또는 중간에 X 값을 부여하여 추가 할 수 있습니다.

그래서 제 질문은 다음과 같습니다

1. 어떻게 임의의 위치에 점을 추가하는?

2. 추가 된 요점을 어떻게 제거합니까?

문제를 설명하기 위해 다음 데모를 첨부하고 있습니다.

$(function() { 
 
    $('#container').highcharts({ 
 

 
     series: [{ 
 
      data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] 
 
     }] 
 

 
    }); 
 

 

 
    // the button action 
 
    var i = 0; 
 
    $('#button').click(function() { 
 
     var chart = $('#container').highcharts(); 
 
     chart.series[0].addPoint(50 * (i % 3)); 
 
     i += 1; 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.highcharts.com/highcharts.js"></script> 
 

 
<div id="container" style="height: 400px"></div> 
 
<button id="button" class="autocompare">Add point</button>

Highcharts 말한다의 doc "포인트 옵션과 같은

Answer 1

. 옵션 단수 인 경우, 즉 Y 값 포인트가 배열되는 series.If 추가되고 그것은 각각 x와 y 값으로 해석 될 것입니다. " 따라서 배열을 addPoint()의 매개 변수로 지정하십시오.

포인트를 제거하려면 removePoint을 사용하십시오.

$(function() { 
 
    $('#container').highcharts({ 
 

 
     series: [{ 
 
      data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] 
 
     }] 
 

 
    }); 
 

 

 
    // the button action 
 
    var i = 0; 
 
    $('#button').click(function() { 
 
     var chart = $('#container').highcharts(); 
 
     chart.series[0].addPoint([i, 50 * (i % 3)]); 
 
     i += 1; 
 
    }); 
 

 
    $('#removebutton').click(function() { 
 
     var chart = $('#container').highcharts(); 
 
     chart.series[0].removePoint(i); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.highcharts.com/highcharts.js"></script> 
 

 
<div id="container" style="height: 400px"></div> 
 
<button id="button" class="autocompare">Add point</button> 
 
<button id="removebutton" class="autocompare">remove point</button>

Answer 2

당신은 X를 모두 지정해야합니다 : 여기

는 "I"위치에 점을 추가하고, "I"위치에 점을 제거 예이다 y 좌표가 아니면 그렇지 않으면 x 좌표가 x 축의 다음 데이터 요소라고 가정합니다. 시도해보십시오.

$(function() { 
$('#container').highcharts({ 

    series: [{ 
     data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] 
    }] 

}); 


// the button action 
var i = 0; 
$('#button').click(function() { 
    var chart = $('#container').highcharts(); 
    chart.series[0].addPoint({ 
    x: 2*i, // or some other value 
    y: 50 * (i % 3) 
}); 
    i += 1; 
}); 

});