如何将日期时间数据帧发送到Django模板并使用plotly在js中进行绘制 [英] how to send datetime dataframe to django template and plot it in js using plotly

问题描述

我有一个数据框，我想在Django模板中发送它.

I have a data-frame and I want to send it in my Django template.

views.py 中的

虚拟代码:

dummy code in views.py:

def graphs(request):

    df_new = pd.read_excel("/home/cms/cms/static/Sensorik.xlsx")

    times = df_new.loc[:, df_new.columns[0]].to_json(orient='records') 
    # columns[0] contains datetime values
    
    data_color = df_georgian.loc[:, df_georgian.columns[2]]
    color = data_color.to_json(orient='records')

    context = {
        'times': times,
        'data_color': color,
        ...
        }
    return render(request, 'graphs/graphs.html', context)

在我的模板中，我得到的数据如下:

In my template, I get these data like the following:

<script>
    var times = {{ times|safe }};
    console.log('index: ', typeof(index));
    var color = {{ data_color|safe }};
</script>

color 变量完全可以，但是获取JSON格式时的 times 变量从 2018-05-29 08:09:00 格式化为类似的格式:

the color variable is totally ok but the times variable when get to JSON format turns from 2018-05-29 08:09:00 format to something like it:

元素:1528108200000

element: 1528108200000

我希望能够根据 times 绘制 color 来获得具有线形图的线形图.即我想显示 times 作为我的情节的X点.

I want to be able to plot the color based on times to get a line graph with plotly. i.e. I want to show times as x-ticks of my plot.

关于的任何建议

1-如何将日期时间数据帧发送到Django模板?

或

2-如何在js中将 element:1528108200000 转换为日期时间以将其绘制为x-ticks?

2- how to convert element: 1528108200000 into a datetime in js to plot it as x-ticks?

推荐答案

每当您看到应该是用大数字表示的日期或时间的东西(例如 1528108200000 格式)时，表示它是或与UNIX时间戳类似，即1970年1月1日之后的秒数.在这种情况下，时间戳的长度表示毫秒(而不是秒)，因此它不是UNIX时间戳，但非常接近.

Whenever you see something that should be a date or time expressed in a large number like the 1528108200000 format, that means it is or is similar to a UNIX timestamp—the number of seconds past January 1, 1970. In this case, the length of the timestamp indicates that it's milliseconds, not seconds, so it's not exactly a UNIX timestamp but is very close.

自1970年1月1日以来的毫秒数就是 JS在内部存储 Date 对象，这很有趣，因为这意味着某种转换可能发生在JS端，而不是python端(通常会获得ISO格式或UNIX时间戳记.

Milliseconds since January 1, 1970 is the way that JS internally stores Date objects, which is interesting because it means some sort of conversion is probably happening on the JS side, not the python side (where you'd usually get ISO format or UNIX Timestamps).

在任何情况下，在JS方面都非常容易解决，因为您可以简单地解析数字:

In any case, it's pretty easy to solve on the JS side because you can simply parse the number:

dateObject = new Date(1528108200000);

如果您进行了解析并将数据作为 Date 对象传递给Plotly，则Plotly应该能够识别您的日期.

If you do that parsing and pass the data to Plotly as Date objects, Plotly should be able to recognize your dates.

一个简单的方法是:

const times = [1528108200000, 1528108200000, 1528108200000]
const parsed = times.map(time => new Date(time))

假设您的 times 变量只是这些整数的数组.

assuming your times variable is just an array of these integers.

这篇关于如何将日期时间数据帧发送到Django模板并使用plotly在js中进行绘制的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！