Django / plotly.js: передать столбцы Pandas Dataframe в шаблонную диаграмму

Question

У меня есть pandas dataframe (не пользовательский ввод), хранящийся в моей базе данных как csv. Я извлекаю этот CSV в своем представлении, а затем хочу передать два столбца в мой шаблон и в диаграмму plotly.js: столбец даты и столбец значений. Как я должен правильно передать их как переменные шаблона, чтобы сюжетный JavaScript правильно их интерпретировал?

попытка решения:

views.py

def chart_function(request):
       df = #dataframe is extracted from DB using some code
       dates = list(pd.to_datetime(df['dates']))
       values = [float(i) for i in list(df['values'])]
       return render(request, template.html, {'values': values, 'dates': dates})   

template.html:

<div id="myDiv"></div>
<input type = "hidden" id = "dates" name = "variable" value = "{{dates|safe}}">
<input type = "hidden" id = "values" name = "variable" value = "{{values|safe}}">


<script type = "text/javascript">
var dates = document.getElementById("dates").value.split(',');
var values = document.getElementById("values").value.split(',');

var trace1 = {
  x: dates,
  y: values,
  type: 'scatter',
};


var data = [trace1];
Plotly.newPlot('myDiv', data, {}, {showSendToCloud: true});
</script>

График на самом деле отображается несколько правильно, но ясно, что даты не передаются как объекты даты, потому что ось x имеет даты в строках и скобках. Мне нужно, чтобы столбцы df были распознаны как даты / значения с помощью сюжета javascript.

Я думаю, что мое решение на полпути немного взломано и неправильно интерпретируется диаграммой.

heresобразец кадра данных:

Date          Value          
2019-01-03    3.0
2019-01-04    4.0
2019-01-05    5.0
2019-01-06    6.0
2019-01-07    7.0
2019-01-08    8.0
2019-01-09    9.0
2019-01-10   10.0
2019-01-11   11.0
2019-01-12   12.0
2019-01-13   13.0
2019-01-14   14.0
2019-01-15   15.0
2019-01-16   16.0

Answer 1

Ваш процесс состоит из нескольких шагов:

1. Извлечение данных из хранилища данных (обычно это база данных, но в данном случае CSV)
2. Поместите эти данные вшаблон
3. Синтаксический анализ данных в JS
4. Plotly

Шаг 1 великолепен, но на шаге 2 у вас немного странная методология. Обычно это называется сериализацией;Я бы настоятельно рекомендовал не использовать скрытые данные такими, какие вы есть. Ваша цель - перевести ваш массив данных Pandas в переменную JS, это проще, чем вы думаете.

Вы можете устранить скрытые входные данные, изменив свой javascript следующим образом:

var trace1 = {
  x: {{dates|safe}},
  y: {{values|safe}},
  type: 'scatter',
};


var data = [trace1];
Plotly.newPlot('myDiv', data, {}, {showSendToCloud: true});

Поскольку вы можете думать о шаблоне Django просто как о копировании / вставке: он будет вставлять ваши данные куда угодноВы помещаете этот тег, будь то в части HTML или части JS.

Для дальнейшего использования у Pandas есть метод сериализации под названием df.to_json(), который построен для этого перевода и имеет встроенные опции для управления форматированием даты и прочим. Это лучший инструмент для использования, но он не является технически необходимым здесь. Документы: https://pandas.pydata.org/pandas-docs/stable/reference/api/pandas.DataFrame.to_json.html

На третьем шаге плотно ожидаются объекты JS Date, и вы даете ему строки - вам необходимо сначала проанализировать их с помощью Date.parse ()

Один из способов сделать это - сопоставить функцию Date.parse () с массивом строк даты, например:

unparsedDates = {{dates|safe}}

parsedDates = unparsedDates.map(dateString => new Date(dateString) )

var trace1 = {
  x: parsedDates,
  y: {{values|safe}},
  type: 'scatter',
};


var data = [trace1];
Plotly.newPlot('myDiv', data, {}, {showSendToCloud: true})