Highcharts和Django

我正在尝试使用Django图表，其中包含来自Django站点上PostgreSQL数据库的数据。我有一个函数，它返回一系列我想要绘制出来的信息，但我不知道1：如何将这些数据放入图表，2：如何以可接受的方式格式化日期

我正在构建甘特图来显示“状态机”的“节点”之间的关系

我首先尝试将for循环放在图表的数据部分中，但它不会连接依赖项，因为当数据在循环中迭代时，该数据可能不存在。我也很难让它理解我传递的日期时间

下面是我想做的

{% load static %}

{% load humanize %}
<div id="container"></div>

<script>
  var chart_data = [{% for node in nodes %}{
      start: '{{node.added}}',
      end: '{{node.added}}',
      color: 'green',
      name: '{{node.node_name}}',
      dependency: '{{node.parent1}}',
      id: '{{node.id}}',
      node_parent_1: '{{node.parent1}}',
      node_parent_2: '{{node.parent2}}',
      script: '{{node.script}}',
      param: '{{node.parameter}}',
      node_status: '{{node.status}}',
      location: '{{node.location}}',
      active: '{{node.active}}',
      enabled: '{{node.enabled}}',
      trigger: '{{node.trigger}}',
      locked: '{{node.locked}}',
      api: '{{node.api_key}}',
      retry_amount: '{{node.retry_number}}',
  }, {% endfor %}]
console.log(chart_data);

Highcharts.ganttChart('container', {
  series: [{
    name: 'Nodes',
    data: [chart_data]
  }],
  tooltip: {
    pointFormatter: function () {
      var point = this,
        format = '%e. %b',
        options = point.options,
        completed = options.completed,
        amount = isObject(completed) ? completed.amount : completed,
        status = ((amount || 0) * 100) + '%',
        lines;

      lines = [{
        value: point.name,
        style: 'font-weight: bold;'
      }, {
        title: 'Start',
        value: dateFormat(format, point.start)
      }, {
        visible: !options.milestone,
        title: 'End',
        value: dateFormat(format, point.end)
      }, {
        title: 'Node Parent 1',
        value: options.node_parent_1  
      }, {
        title: 'Node Parent 2',
        value: options.node_parent_2  
      }, {
        title: 'Script',
        value: options.script  
      }, {
        title: 'Parameter',
        value: options.param  
      }, {
        title: 'Status',
        value: options.node_status  
      }, {
        title: 'Location',
        value: options.location  
      }, {
        title: 'Active',
        value: options.active  
      }, {
        title: 'Enabled',
        value: options.enabled  
      }, {
        title: 'Trigger',
        value: options.trigger  
      }, {
        title: 'Locked',
        value: options.locked  
      }, {
        title: 'API Key',
        value: options.api  
      }, {
        title: 'Retry Amount',
        value: options.retry_amount  
      }];

      return reduce(lines, function (str, line) {
        var s = '',
          style = (
            defined(line.style) ? line.style : 'font-size: 1.5em;'
          );
        if (line.visible !== false) {
          s = (
            '<span style="' + style + '">' +
            (defined(line.title) ? line.title + ': ' : '') +
            (defined(line.value) ? line.value : '') +
            '</span><br/>'
          );
        }
        return str + s;
      }, '');
    }
  },
  title: {
    text: 'Node os the Machine'
  }
});
</script>

任何帮助都将不胜感激。

---

谢谢

你已经看过官方的指南了吗？如何在Django中使用Highcharts库？我想你可以在第二个问题中找到一些信息。第一个似乎与使用Highcharts库无关，而是与使用general Django有关。

(6) [{…}, {…}, {…}, {…}, {…}, {…}]
0:
active: "False"
api: ""
color: "green"
dependency: "test3"
enabled: "False"
end: "Sept. 9, 2020, 4:20 p.m."
id: "6"
location: "L-3"
locked: "False"
name: "test5"
node_parent_1: "test3"
node_parent_2: "None"
node_status: "Nominal"
param: "0"
retry_amount: "1"
script: "tester"
start: "Sept. 9, 2020, 4:20 p.m."
trigger: "False"
__proto__: Object
1: {start: "Sept. 9, 2020, 4:19 p.m.", end: "Sept. 9, 2020, 4:19 p.m.", color: "green", name: "test10", dependency: "test5", …}
2: {start: "Sept. 9, 2020, 4:18 p.m.", end: "Sept. 9, 2020, 4:18 p.m.", color: "green", name: "test4", dependency: "test2", …}
3: {start: "Sept. 9, 2020, 4:17 p.m.", end: "Sept. 9, 2020, 4:17 p.m.", color: "green", name: "test3", dependency: "Test", …}
4: {start: "Sept. 9, 2020, 4:16 p.m.", end: "Sept. 9, 2020, 4:16 p.m.", color: "green", name: "test2", dependency: "Test", …}
5: {start: "Sept. 9, 2020, 3:59 p.m.", end: "Sept. 9, 2020, 3:59 p.m.", color: "green", name: "Test", dependency: "None", …}
length: 6
__proto__: Array(0)