javascript - 在图形中间添加点

Question

嘿，我正在使用 highcharts 作为我的基本图形库。我想动态地向图形添加点，根据 highcharts API 文档，我应该使用 addPoint 方法。我曾尝试使用此方法，但在每次尝试中，图形总是将点添加到系列的末尾而不是系列的中间。

根据他们的 API 文档:

Add a point to the series after render time. The point can be added at the end, or by giving it an X value, to the start or in the middle of the series.

所以我的问题是:

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

作为doc Highcharts 说，“点选项。如果选项是单个数字，则将具有该 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>