입력란을 사용하여 값을 배열에 삽입하는 방법은 무엇입니까?

Question

두 개의 데이터 열을 보여주는 차트가 있습니다. 페이지가로드되면 차트의 두 막대에 모두 0을 표시해야합니다. 그런 다음 두 개의 텍스트 상자를 사용하여 값을 변경하는 사용자에게 컨트롤을 제공하려고합니다. 아마도 'keyup'을 사용하기 때문에 사용자는 제출 버튼을 누를 필요가 없습니다.

var barvalues = [0,0]; 

HTML/CSS와 JS, JQUERY를 사용할 계획입니다. HTML5가 아닌 한 차트를 사용할 수 있습니다. 사용자는 IE 8, 9, 10 및 11에서 왔습니다. 내가 가진 문제는 'on-the-fly'입력 필드의 데이터를 barvalues ​​배열에 바인딩하는 것입니다. 내가 어떻게 해? 입력 상자에서 탭을 누를 때마다 차트가 업데이트되도록 배열의 값을 동적으로 변경/수정할 수 있습니까? 감사!!

Answer 1

http://jsfiddle.net/r3ou2b9q/5/

HTML :

<div id="bar_graph_wrapper"> 
    <div id="bar1" class="bars"></div> 
    <div id="bar2" class="bars"></div> 
</div> 

<input type="text" value="0" class="bar_val" id="bar1_val" /> 
<input type="text" value="0" class="bar_val" id="bar2_val" /> 

CSS :

#bar_graph_wrapper { 
    height:300px; 
    position:relative; 
    width:100px 
} 
.bars { 
    width:50%; 
    height:0; 
    float:left; 
    position:absolute; 
    bottom:0; 
} 
#bar1 { 
    background-color:red 
} 
#bar2 { 
    background-color:blue; 
    right:0 
} 

JQ :

function setValue(b1, b2) { 

    var maxValue = 100; 

    if (b1 > maxValue) maxValue = b1; 
    if (b2 > maxValue) maxValue = b2; 

    var perc1 = b1 * 100/maxValue; 
    var perc2 = b2 * 100/maxValue; 

    $('#bar1').animate({ 
     height: perc1 + "%" 
    }, 500) 
    $('#bar2').animate({ 
     height: perc2 + "%" 
    }, 500) 

} 

$('.bar_val').keyup(function() { 
    var val1 = ~~$('#bar1_val').val(); 
    var val2 = ~~$('#bar2_val').val(); 

    setValue(val1, val2) 
}); 

Answer 2

jQuery와 JS 차트 패키지 HighCharts을 사용하여이 정보를 통합하십시오. 차트의 각 막대에 바인딩 된 입력 상자 2 개만 있습니다.
당신은 위/아래 화살표를 눌러하거나 값을 입력하고 차트 '- 더 - 플라이'

http://jsfiddle.net/46jad9xk

HTML

<script src="http://code.highcharts.com/highcharts.js"></script> 
<script src="http://code.highcharts.com/modules/exporting.js"></script> 

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> 
Changes bar 1 <input type='text' name='series-1' value=10> 
Changes bar 2 <input type='text' name='series-2' value=10> 

업데이트됩니다하여 값을 변경할 수 있습니다

JS :

$(function() { 

$('input').keyup(function(event) { 

    var v = parseInt($(this).val(),10); 

    if(event.which == 38){//arrow up    
     v++ 
    } 
    else if(event.which == 40){//arrow down 
     if(v>0)v-- 
    } 

    var chart = $('#container').highcharts(), 
     series = chart.get($(this).attr('name')); 
    $(this).val(v)   
    series.setData([v]); 
}) 

var chart1 = $('#container').highcharts({ 
    chart: { 
     type: 'column' 
    }, 
    xAxis: { 
     categories: [ 
      'Bars' 
     ] 
    }, 
    yAxis: { 
     min: 0, 
     title: { 
      text: 'User setting' 
     } 
    }, 
    series: [{ 
     id: 'series-1', 
     name: 'Series 1', 
     data: [10] 

    }, { 
     id: 'series-2', 
     name: 'Series 2', 
     data: [10] 

    }] 
}); 
});