Как я могу сделать так, чтобы мои chartjs обновлялись каждый раз, когда вставлялись данные, или по временному интервалу? - PullRequest
Новая
       0

Как я могу сделать так, чтобы мои chartjs обновлялись каждый раз, когда вставлялись данные, или по временному интервалу?

0 голосов
/ 11 февраля 2019

У меня есть chartjs, которые используют переменные в качестве данных.и я хочу, чтобы он обновлялся, чтобы можно было увидеть новые данные.Было бы лучше, если бы я мог сделать это, когда данные вставлены, но я понятия не имею, как это сделать, другой вариант будет обновить с интервалом времени. Я смотрел на https://www.chartjs.org/docs/latest/developers/updates.html, но для меня это не имело смысла

Вот мой код РАБОТА С КАРТОЧКОЙ ДОЛЖНА СОЗДАТЬ ЕГО ОБНОВЛЕНИЕ НА СВОЙ СОБСТВЕННОСТИ 

<code><div class="row bg-dark">
    <div class="col-12 border">
    <canvas id="myChart"></canvas>
    </div>
</div>

<div class="container">
  <div>
    <?php
      $sth = $db->prepare("SELECT Actual FROM csvhoejde1");
      $sth->execute();
      /* Fetch all of the remaining rows in the result set */
      $result = $sth->fetchAll(PDO::FETCH_COLUMN);
      // $result = explode("@", implode(",@", $result));
      // print_r for at se resultaterne.
      echo'<pre>';
      print_r($result);
      echo'
';$ std = $ db-> prepare ("ВЫБЕРИТЕ Dato_ur_stillet ОТ palle_tbs");$ STD-> Execute ();/ * Извлечь все оставшиеся строки в наборе результатов * / $ palle = $ std-> fetchAll (PDO :: FETCH_COLUMN);?>

Ответы [ 2 ]

0 голосов
/ 11 февраля 2019

Существует способ использовать setInterval, который вызывает функцию для обновления диаграммы (см. Пример: https://jsbin.com/yitep/5/edit?html,js,output).

. Или следующим решением будет добавить функцию, которую вы будете вызывать при вставке данных. Вы можетеобновите диаграмму, позвонив в вашем случае myChart.update(). Может случиться так, что вы не имеете или не можете получить экземпляр диаграммы, в этом случае вы можете использовать (это единственный способ получить экземпляр, вам понадобится, если кодвыполняется в другом сценарии): 

    Chart.helpers.each(Chart.instances, function (chart) {
        // your code
    }

Теперь, когда у вас есть экземпляр диаграммы, вы можете манипулировать данными, используйте addData и removeData (проверьте в документах, как это работает).

Проблема в том, что он проходит через все графики, поэтому вам нужно как-то проверить, что такое целевая диаграмма, вы можете сделать это с помощью chart.chart.canvas.id. Эта команда даст вам идентификатор холстовой диаграммы, в вашем случае myChart, чтобы вы могли делать только измененияна графиках, что вы выберете.

Для получения опций графика вы можете использовать график API событие chart.getDatasetMeta(0) (проверьте документы: https://www.chartjs.org/docs/latest/developers/api.html).

Надеюсь, это поможет, не стесняйтесь просить больше.

0 голосов
/ 11 февраля 2019

Есть несколько способов реализовать это.

Самое простое, но, вероятно, "худшее" решение - просто обновлять страницу каждые x секунд.Это решение, однако, сделает практически любую интерактивность на странице бесполезной, поскольку входы и т. Д. Будут сбрасываться каждый раз при обновлении страницы.Поместите следующее в ваш <head> раздел.content будет определять количество секунд между обновлениями. 

<META HTTP-EQUIV="refresh" CONTENT="5">
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...