Highcharts从输入增加/减少数据

时间:2015-11-19 18:02:02

标签: javascript input highcharts

我正在尝试通过拖动它们以及单击增加/减少按钮来启用图表数据更改。我的问题是我不知道如何将值链接到标签中的变量。

我得到public static double[][] sortColumns(double[][] array) { double[][] sorted = new double[3][3]; for(int x = 0; x < 3; x++) { double[] column = new double[3] for(y =0; y < 3; y++){ column[y] = array[y][x]; //convert column to array } Arrays.sort(column); for(y = 0; y < 3; y++){ sorted[y][x] = column[y]; //convert array back to column } } //end loops return sorted; } //end sortRows 变量的输入值:pomY

我现在只测试第一栏。

以下是我的例子:

HTML:

var pomY=Number($('#one').val());

JS:

<body>
    <div id="container" style="width:100%; height:400px;"></div>
    <div id="drag"></div>
    <div id="drop"></div>
    <form method="post" action="">
        <div>
            <label for="name">one</label>
            <input type="text" name="one" id="one" value="">
            <div id="plus" class="inc button">+</div>
            <div id="minus" class="inc button">-</div>
        </div>
    </form>
</body>

有什么建议吗?

1 个答案:

答案 0 :(得分:1)

我希望我理解你:)

基本上,您的声明不在正确的地方。 当您使用当前值初始化pomY时,在拖入帐户后您没有获取它的值。 在事件处理程序中移动声明时,该值是准确的并与图表实际值相对应。 另一个问题是使用初始数据处理按钮。因此,您应该将数据“加载”到输入中(这可以通过多种方式完成)。

对于“奖金”,我使用jQuery和JS做了一些技巧来概括你的代码。我想你必须在那里重写一些代码。

$(function () {



$('#container').highcharts({

    chart: {
        renderTo: 'container',
        animate: false,



    },
    title: {
        text: 'test'
    },


    xAxis: {
        categories: ['1', '2', '3', '4', '5']
    },
    tooltip: {
        yDecimals: 2
    },
    plotOptions: {
        series: {

            allowPointSelect: false,
            point: {

                events: {

                    click: function () {

                        switch (this.category) {

                            case '1':
                                $('#one').val(this.y);
                                break;
                            case '2':
                                $('#two').val(this.y);
                                break;
                            case '3':
                                $('#three').val(this.y);
                                break;
                            case '4':
                                $('#four').val(this.y);
                                break;
                            default:
                                $('#five').val(this.y);
                                break;

                        }



                    },

                    drag: function (e) {


                        $('#drag').html(
                            'Dragging <b>' + this.series.name + '</b>, <b>' + this.category + '</b> to <b>' + Highcharts.numberFormat(e.y, 2) + '</b>');

                    },
                    drop: function () {
                        $('#drop').html(
                            'In <b>' + this.series.name + '</b>, <b>' + this.category + '</b> was set to <b>' + Highcharts.numberFormat(this.y, 2) + '</b>');
                    }

                }

            }
        }


    },


    series: [{
        name: 'test',
        data: [30, 50, 74, 90, 123],
        draggableY: true,
        dragMinY: 0,
        dragMaxY: 200,
        type: 'column',
        minPointLength: 2
    }]
});


var chart = $('#container').highcharts();
var bars = ["one","two","three","four","five"];

var dataLoader = function(){
    $.each(chart.series[0].data, function(){
        $("#"+bars[this.category-1]+"").val(this.y);
    });
}();

$('.inc,.dec').click(function () {
    var valueInput = $($(this).siblings("input")[0]);
    var barNumber = bars.indexOf(valueInput.attr("id"));
    var diff = $(this)[0].className.indexOf("inc") != -1 ? 2 : -2;
    var pomY = Number(valueInput.val())+diff;
    chart.series[0].data[barNumber].update(pomY);
    valueInput.val(pomY)
});});

正如您所看到的,我使用了一个函数来获取所有初始数据并使用它更新相应的输入。 然后,我为每个事件绑定了点击事件,并命令他们在事件被触发时更新正确的输入。

http://jsfiddle.net/kja0tf7t/3/