追加點在圖中間

Question

嘿，我使用highcharts作爲我的基本圖形庫。 我想根據高層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>

Answer 1

作爲Highcharts說doc「的點的選項。如果選項是單數，條件是Y值的點追加到series.If它是一個數組，它將分別被解釋爲x和y值。「所以只要給一個數組作爲參數addPoint()。

要刪除一個點，請使用removePoint。

這裏是添加在位置「I」的地步，而在位置「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

您需要同時指定X和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; 
}); 

}）;