Добавление данных списка в линейный график JavaScript - проект Django
Я создал список и определил его в своем views.py:
mydata = [{'date': '2020-01-02T00:00:00Z', 'value': 13},
{'date': '2020-01-03T00:00:00Z', 'value': 2},
{'date': '2020-01-06T00:00:00Z', 'value': 5}]
Я хочу добавить свои собственные данные в шаблонный js график в моем HTML файле:
<script>
var chart = am4core.create("chartdiv", am4charts.XYChart);
chart.paddingRight = 20;
var data = [];
var visits = 10;
for (var i = 1; i < 50000; i++) {
visits += Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 10);
data.push({
date: new Date(2018, 0, i),
value: visits
});
}
chart.data = data;
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.grid.template.location = 0;
dateAxis.minZoomCount = 5;
dateAxis.groupData = true;
dateAxis.groupCount = 500;
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
var series = chart.series.push(new am4charts.LineSeries());
series.dataFields.dateX = "date";
series.dataFields.valueY = "value";
series.tooltipText = "{valueY}";
series.tooltip.pointerOrientation = "vertical";
series.tooltip.background.fillOpacity = 0.5;
chart.cursor = new am4charts.XYCursor();
chart.cursor.xAxis = dateAxis;
var scrollbarX = new am4core.Scrollbar();
scrollbarX.marginBottom = 20;
chart.scrollbarX = scrollbarX;
var selector = new am4plugins_rangeSelector.DateAxisRangeSelector();
selector.container = document.getElementById("selectordiv");
selector.axis = dateAxis;
</script>
Я знаю, что должен изменить chart.data = data, но когда я заменил его на chart.data = {{mydata}}, график ничего не отобразил. Я попробовал изменить его вручную: chart.data = [{'date': '2020-01-02T00:00:00Z', 'value': 13}, {'date': '2020-01-03T00:00:00Z', 'value': 2}, {'date': '2020-01-06T00:00:00Z', 'value': 5}] и данные отобразились успешно.
Я уверен, что правильно импортировал mydata в views.py, потому что я проверил {{mydata}} в HTML-файле, он показал весь список. Я также пробовал chart.data = {mydata}, chart.data = mydata и chart.data = [mydata], но ни один из них не сработал.
Я сам решил эту проблему.
В области графика я просто использовал:
chart.data = {{ mydata | safe }}