Как обновить переменную?

Question

[gotohell]

Привет всем! В переменную записываются данные из инпута далее эта переменная передаёт эти данные на график координат. Только вот отображает она эти данные только если допустит открыть "инспектор кода".

Не могу понять как исправить это!
Сам график
Попробуйте ввести цифры, точка появиться только после того как откроете инспектор кода!

Comments

[napa3um]

Точка появится при любом изменении размера окна, не только появлением инспектора.

[gotohell]

napa3um: Знаете как лечить?

Answer 1

[Larisa Moroz]

График перерисовывается автоматически при изменении размеров окна. Это как раз и происходит, когда вы открываете консоль.
Чтоб перерисовать график при добавлении точки, вам надо:

1. при создании графика поименовать его

const myChart = new Chartist.Line('.chart', {
  series: [
    coord, coordinatYX
  ]
},
  {
  axisX: {
    type: Chartist.AutoScaleAxis,
    onlyInteger: true,
    offset: 20
  }

});

2. затем, при добавлении точки — обновлять:
myChart.update();

Comments

[gotohell]

Можно ещё вопрос, скрипт ставит точку обновляет график. Данные для графика он берет с таблицы. Когда вводишь данные скрипт фильтрует данные и показывает в таблице только то что подходит по диапазону. То что не подошло в тег он ставит класс hide в скрипте я указал что бы данные он брал с тех тегов где нет класса hide. Если график обновляется по клику то почему он не убирает не нужные кривые. Если ставить класс в ручную то кривая не отображается.

[Larisa Moroz]

Добавьте отдельный метод, куда сгруппируйте все действия, которые надо делать при клике по кнопке (всё, что вы уже накодировали во множественных $('.go').on('click'…) — надо собрать в одно место).

Туда добавьте пересборку массива точек, которая у вас сейчас начинается с

var coord = [];
var iter = 0;

и перерисовку графика myChart.update();

И уже в конце добавьте привязку клика по кнопке с вызовом созданного метода:

$('.go').on('click', ваш_метод_для_обновления_графика)

[gotohell]

Сделал так но не получилось!

$('.go').on('click', function(){
  $('.table-data').not('.hide').each(function() {
    var iter = 0;
    var coord = [];
        coord[iter] = {
          y: $(this).data('pascalmax'), x: $(this).data('rashodmin')
        }
        coord[iter+1] = {
          y: $(this).data('pascalmin'), x: $(this).data('rashodmax')
        }
      iter+=2;
      })
$('.table-data').each(function() {
    coordinatYX[iter] = {
      y: $('.pascal').val(), x: $('.rashod').val()
    }
    })
    myChart.update();
});

[Larisa Moroz]

Сейчас непонятно что конкретно у вас не работает, портому что вот тут ekvador.kz/provent/www/js/script.js ничего не изменилось

Сделайте рефакторинг кода:
1. Уберите $('.go').on('click'… из цикла . Это приводи к непредсказуемым последствиям.
2. Соберите код из всех вызовов $('.go').on('click'… в одно место / один вызов, а то каша в коде и вы сами себя запутываете.
3. Дайте ссылку на изменённый вариант

[gotohell]

Larisa Moroz: Вотс https://codepen.io/webmasterotboga/pen/PKYYeY?edit...

[Larisa Moroz]

Вы оставили $('.go').on('click'… в цикле, хоть и переместили в отдельную функцию. Не надо так.

Вот так всё работает: https://codepen.io/lmoroz/pen/OjLRyz?editors=0010

[gotohell]

Larisa Moroz: Огромное Вам спасибо!