Моя диаграмма не будет обновлена в реальном времени - сделано в Chart.js и Java Script
Популярные ответы бесполезны, потому что они определяют инъекцию зависимости таким образом, что это не полезно. Согласитесь, что под «зависимостью» мы подразумеваем некоторый ранее существовавший другой объект, который нужен нашему объекту X. Но мы не говорим, что делаем «инъекцию зависимостей», когда говорим
$foo = Foo->new($bar);
. Мы просто называем это передачей параметров в конструктор. Мы делали это регулярно с тех пор, как были изобретены конструкторы.
«Инъекция зависимостей» считается типом «инверсии управления», а это означает, что из вызывающего абонента выведена некоторая логика. Это не тот случай, когда вызывающий абонент передает параметры, поэтому, если это DI, DI не будет означать инверсию управления.
DI означает, что между вызывающим и конструктором, который управляет зависимостями, существует промежуточный уровень , Makefile - простой пример инъекции зависимостей. «Вызывающий» - это человек, который набирает «make bar» в командной строке, а «конструктор» - это компилятор. Файл Makefile указывает, что бар зависит от foo, и перед выполнением
gcc foo.o bar.o -o bar
делает
gcc -c foo.cpp; gcc -c bar.cpp
. Лицо, набрав «make bar», не обязательно должно знать, что bar зависит от foo. Зависимость была введена между «make bar» и gcc.
Основная цель промежуточного уровня - это не просто передать зависимости конструктору, но и перечислить все зависимости в только один место и скрыть их от кодера (не для того, чтобы заставить кодер предоставить их).
Обычно промежуточный уровень предоставляет фабрики для построенных объектов, которые должны обеспечивать роль, которую каждый запрошенный объект тип должен удовлетворять. Это связано с тем, что, имея промежуточный уровень, который скрывает детали конструкции, вы уже понесли штраф за абстракцию, наложенный фабриками, поэтому вы могли бы также использовать заводы.
1 ответ
Похоже, вы пытались копировать и вставлять разные коды вместе, не понимая этого по-настоящему:
- функция
adaugaдобавляет входные значения в массивdt2, но затем не расскажите таблицу для обновления. - Функция
addData, которая успешно обновит диаграмму, вызывается только один раз и с неверными переменными (Chart- глобал Chart.js;kg-undefined, поскольку она локально ограничена функциейadauga]).
Я переписал ваш код во фрагмент ниже. См. Аннотации кода для получения дополнительной информации.
// assign the return value from Chart() to a variable which we use for updating.
let chart = new Chart(document.getElementById('line-chart'), {
type: 'line',
data: {
datasets: [{
data: [],
label: 'Asia',
borderColor: '#8e5ea2',
fill: false
}]
},
options: {
scales: {
xAxes: [{
// configure the x-axis as a time axis (this causes Chart.js to place the
// values in chronological order).
type: 'time',
time: {
unit: 'day'
}
}]
},
title: {
display: true,
text: 'World population per region (in millions)'
}
}
});
// bind to the click event of the button element.
document.getElementById('adauga').addEventListener('click', function() {
let dt = document.getElementById('dt').value,
kg = parseInt(document.getElementById('kg').value); // Chart.js requires a number not a string!
if (dt && (kg || kg == 0)) { // basic validity check.
// add the datapoint using the object format.
// see: https://www.chartjs.org/docs/latest/axes/cartesian/time.html#input-data
chart.data.datasets[0].data.push({
x: dt,
y: kg
});
chart.update();
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.min.js"></script>
<input type="number" name="" value="" id="kg">
<input type="date" name="" value="" id="dt">
<button type="button" name="button" id="adauga">Adauga</button>
<canvas id="line-chart" width="200" height="100"></canvas>