как отобразить список даты и времени на графике с помощью диаграммы. js - PullRequest
Новая
       7

как отобразить список даты и времени на графике с помощью диаграммы. js

0 голосов
/ 03 апреля 2020

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

datasets: [{
               label: '# temperature',
               data: [datetime.datetime(2020, 4, 1, 9, 18, 58), datetime.datetime(2020, 4, 1, 9, 21, 1), datetime.datetime(2020, 4, 1, 10, 26, 56), datetime.datetime(2020, 4, 1, 10, 27, 9), datetime.datetime(2020, 4, 1, 10, 27, 35), datetime.datetime(2020, 4, 1, 10, 31, 6), datetime.datetime(2020, 4, 2, 17, 47, 4), datetime.datetime(2020, 4, 2, 17, 48, 18), datetime.datetime(2020, 4, 2, 17, 48, 56)]

1 Ответ

0 голосов
/ 03 апреля 2020

Вы можете сделать это, используя момент. js: 

<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>

Затем в вашем скрипте диаграммы используйте moment(), как в примере ниже.
Обратите внимание, что месяцы имеют индекс 0, поэтому вы нужно вычесть 1 из месяца Python. 

<script>
    var dayFormat = 'YYYY-MM-DD hh:mm:ss';

    function newDateString(year, month, day, hour, minute, second) {
      return moment().year(year).month(month).date(day).hour(hour).minute(minute).second(second).format(dayFormat);
    };

    var data = {
        labels: [   {% for item in labels %}
                        newDateString( {{ item.year }}, 
                                       {{ item.month - 1 }}, 
                                       {{ item.day }},
                                       {{ item.hour }},
                                       {{ item.minute }},
                                       {{ item.second }}
                                     ),
                    {% endfor %}
                ],
        series: [   {% for item in series %} 
                        {{ item }},
                    {% endfor %}
                ]
    };

    var options = {
        width: "640px",
        height: "320px"
    };

    // Create a new line chart object where as first parameter we pass in a selector
    // that resolves to our chart container element. The Second parameter
    // is the actual data object.
    new Chartist.Line('#chart1', data);
</script>
...