高位图表增加/减少输入数据

Highcharts increasing/decreasing data from input

本文关键字：输入 数据 增加 位图 高位图      更新时间：2023-09-26

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

我得到pomY变量的输入值：var pomY=Number($('#one').val());

我现在只测试第一列。

这是我的例子：

HTML:

<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>

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 pomY = Number($('#one').val());
$('#plus').click(function () {
    pomY += 2;
    chart.series[0].data[0].update(pomY);
    $('#one').val(pomY);
});
$('#minus').click(function () {
    pomY -= 2;
    chart.series[0].data[0].update(pomY);
    $('#one').val(pomY);
});
});

有什么建议吗？

我希望我理解得对：）

基本上，你的声明不在正确的位置。当您用它的当前值初始化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/

相关文章：