Punkt załączyć w środku wykresu

Question

Hej, używam highcharts jako mojej podstawowej biblioteki graficznej. Chciałbym dodawać punkty dynamicznie do wykresu, zgodnie z dokumentacją interfejsu API highcharts, powinienem użyć metody addPoint. Próbowałem użyć tej metody, ale przy każdej próbie wykres zawsze dodawał punkt do końca serii, a nie do środka serii.

Zgodnie z ich dokumentacją API:

dodać punkt do serii po czas renderowania. Punkt można dodać na końcu lub podając wartość X na początku lub w środku serii.

więc moje pytania są następujące:

1. Jak dodał punkt do przypadkowej lokalizacji?

2. Jak usunąć punkt, który został dodany?

Załączam następujące demo, aby zademonstrować problem.

$(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>

Answer 1

Jako doc z Highcharts mówi „opcji punktu. W przypadku opcji jest jeden numer, punkt tej wartości y, jest dołączony do series.If to jest tablicą będzie interpretowany odpowiednio jako wartości xiy. " Więc podaj tablicę jako parametr addPoint(). Aby usunąć punkt, użyj removePoint, aby usunąć punkt.

Oto przykład, który należy dodać punkt w pozycji „I” i usuń punkt w pozycji „I”:

$(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

musisz określić zarówno x i współrzędne y, w przeciwnym razie zakłada się, że współrzędna x jest następnym punktem danych na osi x. Wypróbuj to:

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

});