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

时间:2019-04-04 09:21:49

标签: javascript highcharts

我具有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);
});

1 个答案:

答案 0 :(得分:0)

您需要向“保存”按钮添加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