在图

Question

嘿我使用highcharts作为我的基本图库。 我想动态地将点添加到图表中，根据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值的点附加到系列。如果它是一个数组，它将被解释为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轴上的下一个数据点。试试这个：

false

}）;