高图增加/减少来自输入的数据
[英]Highcharts increasing/decreasing data from input
问题描述
I'm trying to enable chart data change by dragging them and also by clicking on increase/decrease button. 
我正在尝试通过拖动图表数据以及单击增加/减少按钮来启用图表数据更改。 My problem is I don't know how to link value to variable that is in label right now. 我的问题是我现在不知道如何将值链接到标签中的变量。
I get input value to pomY variable: var pomY=Number($('#one').val()); 我得到输入值到pomY变量： var pomY=Number($('#one').val());
I'm testing only first column for now. 我现在仅测试第一列。
Here is my example: 这是我的示例：
HTML: 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: 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);
});
});
any suggestions? 有什么建议么？
1 个解决方案
解决方案1
1 已采纳 2015-11-20 09:58:45
I hope I understood you right :) 我希望我对你没错:)
Basically, your declarations were not in the right place. 基本上，您的声明不在正确的位置。 When you initialized pomY with it's current value, you did not take it's value after dragging into account. 当用它的当前值初始化pomY时，将其考虑在内后并没有考虑它的值。 When moving the declaration inside the event handler, the value is accurate and corresponding with the chart real value. 在事件处理程序中移动声明时，该值是准确的，并且与图表的实际值相对应。 Another problem was handling the buttons with the initial data. 另一个问题是处理带有初始数据的按钮。 Therefore you should "load" the data into the inputs (this could be done in many ways). 因此，您应该将数据“加载”到输入中（可以通过多种方式完成）。
For "bonus" I did some tricks with jQuery and JS to generalize your code a bit. 为了获得“好处”，我使用jQuery和JS进行了一些技巧，以使您的代码泛化一些。 I guess you'll have to re-write some of the code there. 我猜您将不得不在那里重写一些代码。
$(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)
});});
As you can see, I used a function that takes all the initial data and updates the corresponding input with it. 如您所见，我使用了一个函数，该函数获取所有初始数据并使用它来更新相应的输入。 Then, I binded the click events for each of them, and ordered them to update the right input when the event is fired. 然后，我为每个事件绑定了click事件，并命令它们在触发事件时更新正确的输入。
http://jsfiddle.net/kja0tf7t/3/ http://jsfiddle.net/kja0tf7t/3/
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.