在图的中间附加点

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 的文档所说，“点选项。如果选项是单个数字，则具有该 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>