如何将drop值存储为我的数组中的新数据？

Question

我有drop函数，我想将值存储为我的数组中的新数据，是否可能？

    series: [{
                name: 'Temperature',
                type: 'spline',
                connectNulls: true,
                cursor: 'pointer',
                data: [13, 54, 35, 24, 65, 81,13, 54, 35, 24, 65, 81,13, 54, 35, 24, 65, 81],
                tooltip: {
                    valueSuffix: ' °C',
                },
                point: {
            events: {
            drag: function() {
              document.getElementById('point-temp').value = (Math.round(this.y));
            }
          }
        },
            }]


This is how I show it in an input field :

    <input placeholder="new Temperature" id="point-temp" type="text" class="field"  value="">

This is the button to store the new point value in my array.

     <button class="btn"  id="save-data">Save to data</button>

这是将新数据添加到数组的功能，但它不起作用

document.getElementById('save-data').addEventListener('click', function(){
    document.getElementById('point-temp').value;
    chart.series[0].data(point);
});

Answer 1

您需要在“保存”按钮中添加click事件，并将输入中的值存储在数据数组中的正确位置：

var data = [10, 20, 10, 20, 10, 20],
    newData = data.slice();

Highcharts.chart('container', {
    chart: {
        animation: false
    },
    plotOptions: {
        series: {
            point: {
                events: {
                    drop: function() {
                        var inputEl = document.getElementById('point-temp');
                        inputEl.value = this.y;
                        inputEl['data-index'] = this.index;
                    }
                }
            }
        },
    },
    series: [{
        data: data,
        draggableY: true
    }]
});


document.getElementById('save-data')
    .addEventListener('click', function() {
        var inputEl = document.getElementById('point-temp');
        newData[inputEl['data-index']] = Math.round(Number(inputEl.value));
    });

现场演示：http://jsfiddle.net/BlackLabel/3m04f9dz/

API：https://api.highcharts.com/highcharts/series.line.point.events.drop