高圖增加/減少來自輸入的數據

Question

我正在嘗試通過拖動圖表數據以及單擊增加/減少按鈕來啟用圖表數據更改。 我的問題是我現在不知道如何將值鏈接到標簽中的變量。

我得到輸入值到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);
});

});

有什么建議么？

Answer 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)
});});

如您所見，我使用了一個函數，該函數獲取所有初始數據並使用它來更新相應的輸入。 然后，我為每個事件綁定了click事件，並命令它們在觸發事件時更新正確的輸入。

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

高圖增加/減少來自輸入的數據

問題描述

1 個解決方案

解決方案1
1 已采納 2015-11-20 09:58:45

高圖增加/減少來自輸入的數據

問題描述

1 個解決方案

解決方案1 1 已采納 2015-11-20 09:58:45

解決方案1
1 已采納 2015-11-20 09:58:45