Highcharts从输入增加/减少数据

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

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

});

有什么建议？

来源

2015-11-19 Jakub Špitzer

我真的不明白你在做什么。通过将值链接到标签中的变量，你的意思是什么？请澄清您的问题.. – MorKadosh

当您通过拖动编辑第一列时，我需要通过拖动后单击“+”按钮来增加该值。也许这将有助于澄清我的问题：http://jsfiddle.net/kja0tf7t/ 抱歉我的不良经历。 –

我希望我能理解你:)

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

来源

2015-11-20 09:58:45 MorKadosh

这正是我需要的！我是jQ和JS中的新人..所以感谢您的帮助！帮助很多！ :) –

没问题。请将答案标记为“正确”以关闭它。 – MorKadosh

Highcharts从输入增加/减少数据

回答

相关问题