Пользовательский ввод в старших чартах

Question

Я хочу использовать старшие графики (линейный график) с данными, вводимыми пользователем. Данные в основном в 2 ползунках диапазона и один ползунок владения. Ось x должна иметь годы от current_year до current_year + срок владения, ось y должна иметь данные от двух ползунков диапазона, нанесенных на график в виде двух первых входных данных (например, данные 5, затем 2 * 5, 2 * 2 * 5 и т. д. до срока владения).

Я только начинаю с высоких карт. Можете ли вы помочь мне в этом?

Пример: Теперь это инвестиции, срок владения и долга ROI

Итак, вы можете рассматривать это как клиента, который инвестирует в течение срока и ожидает доходностипроцентов.

Теперь ваша ось х, которая увеличивает срок пребывания от 0 до срока владения (то есть 0,1,2,3, ... владение). Ваша ось y - это сумма (т. Е. Увеличенные инвестиции), чтобы рассчитать увеличенные инвестиции. Вы можете использовать сложную процентную формулу, то есть сложный процент = P (1 + R) ^ N (P = сумма инвестиций, R - ROI долга, а N - срок владения)

Таким образом, вы получите значения сложных процентов (которые равны количеству владений)

Пример: если инвестиции - рупии. Срок владения 1000 составляет 5 лет. ROI долга составляет 7%

* 1014. * Срок владения (или N) - сложные проценты 1- 1070, 2- 1144,9, 3- 1310,7, 4- 1605,7, 5- 2104,8,

. Вам нужно построить график: на срок владения по оси x, по сумме и точкам по оси y как сложный процент.

Answer 1

Во-первых, вы должны добавить прослушиватели событий на селекторах диапазонов, чтобы инициировать изменение, а внутри функции обратного вызова вычислить новые данные:

var pmtRange = document.getElementById('investment');
pmtRange.addEventListener('change', ...some function here);

Во-вторых, используйте метод series.setData(), чтобы обновить диаграмму вновь рассчитанными данными. :

chart.series[0].setData(ranges);

Код:

var pmtRange = document.getElementById('investment'),
  tenureRange = document.getElementById('tenure'),
  roiRange = document.getElementById('roi'),
  chart;

function setData(chart) {
  var pmt = +pmtRange.value,
    tenure = +tenureRange.value,
    roi = +roiRange.value,
    ranges = [],
    monthlyRate = roi / 100 / 12,
    numMonths = tenure * 12;

  ranges[0] = pmt;

  for (var i = 1; i <= numMonths; i++) {
    ranges[i] = Math.round(
      (ranges[i - 1] * (Math.pow(1 + monthlyRate, i))),
      0
    );
  }

  chart.series[0].setData(ranges);
}

chart = Highcharts.chart('container', {
  chart: {
    events: {
      load: function() {
        var chart = this;

        setData(chart);
      }
    }
  },
  plotOptions: {
    series: {
      pointStart: 2011
    }
  },
  series: [{
    name: 'Installation',
    data: []
  }],
  responsive: {
    rules: [{
      condition: {
        maxWidth: 500
      },
      chartOptions: {
        legend: {
          layout: 'horizontal',
          align: 'center',
          verticalAlign: 'bottom'
        }
      }
    }]
  }
});

pmtRange.addEventListener('change', setData.bind(null, chart));
tenureRange.addEventListener('change', setData.bind(null, chart));
roiRange.addEventListener('change', setData.bind(null, chart));

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

<div class="range-slider">
  <input id="investment" type="range" value="1000" min="1000" max="30000" step="1000">
  <input id="tenure" type="range" value="5" min="1" max="20" step="1">
  <input id="roi" type="range" value="1" min="1" max="15" step="1">
</div>

Демонстрация:

• http://jsfiddle.net/BlackLabel/avru5y8x/

Ссылка API:

• https://api.highcharts.com/class-reference/Highcharts.Series#setData

• https://api.highcharts.com/highcharts/chart.events.load