Control a chart with an input box, control an inpu

2019-09-04 06:38发布

问题:

I'm using a draggable highchart to portray some NBA payroll data. If the bar gets dragged I would like to change an input box with a new salary. I've been going at this for a while, and have not made much progress. I can get a draggable event to change an input box, but I cannot do the reverse. I need some help.

I originally, started going a state change route and this was my thinking. Basically, the chart can control a global, and the input can control the global. Then I just need to update the corresponding items in the DOM.

var state = {};
state.contractStructure = 'EQUAL'; // Could also be PROGRESSIVE, BACKEND, DIMINISHING
state.netIncome = <%= @team1_tax[:net_income] %>;
state.numYears = <%= @lookup_hash[:years]; %>;
state.incomeByYear = [];


function setNetIncome(value) {

  state.netIncome = value;
  if (state.contractStructure === 'EQUAL') {
     var perYearIncome = state.netIncome / numYears;
     for (var i = 0; i < state.numYears; i++) {
         state.incomeByYear[i] = perYearIncome
    }
  } else if (state.contractStructure === PROGRESSIVE) {
  }


  // Once all data is computed.
  // Loop through all input boxes and set input[i].value = state.incomeByYear[i]

}

Array.prototype.slice.call(document.getElementsByClassName('year-inputs')).forEach(element) {

   element.addEventListener('change', function(e) {

      var value = e.value; // this is the number typed intot he boxes
      var i = ??? //
      state.incomeByYear[i] = value

      // Once all data computed
      // Re-reneder the high chart with computed data

   }


})


function onNewContractDrag(newValue, year) {
    state.incomeByYear[year] = newValue
    state.netIncome // somehow adjust according to newValue

    // Need to update all boxes to reflect chagne in state
    // Loop through each one. Each one's value get set to state.incomeByYear[i]

}

Then it seemed like overkill, so I started investigating other ways.

I've created a JsFiddle, but I can only go from dragging to and input box. Should I go the state change route? JsFiddle route.

My js fiddle is http://jsfiddle.net/AyUbx/3388/