2

你好我一直在尝试使用谷歌甘特图，它正在渲染这条消息而不是图表：

Cannot read property 'valueOf' of null×

这是我的一些代码：

这是构建图表的脚本 {% for project in projects %} google.charts.load('current', {'packages':['gantt']}); google.charts.setOnLoadCallback(drawChart);

    function drawChart() {
    arr = []
    data_arr = []
    var pk = "{{project.sales_project_id}}"
    var endpoint2 = '/api/gantt/data/'
    $.ajax({
      type: "GET",
      url: endpoint2,
      success: function(data){
        for (i = 0; i < data.timeline.length; i++) {
          if (data.timeline[i][2] == pk) {
                data.timeline[i][0].toString()
                data.timeline[i][1].toString()
                data.timeline[i][2].toString()
                arr.push(data.timeline[i])
              }
        }
        },

            });
      console.log(arr)

      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Task ID');
      data.addColumn('string', 'Task Name');
      data.addColumn('string', 'POC');
      data.addColumn('date', 'Start Date');
      data.addColumn('date', 'End Date');
      data.addColumn('number', 'Duration');
      data.addColumn('number', 'Percent Complete');
      data.addColumn('string', 'Dependencies');

      data.addRows(data_arr);



      var options = {
        height: 400,
        gantt: {
          trackHeight: 30
        }
      };

      var chart = new google.visualization.Gantt(document.getElementById('chart_div'));
      chart.draw(data, options);
    }
  </script>
  {%endfor%}
</head>
{% endblock content %}

这是我的 api 端点的数据：

    {
    "timeline": [
        [
            1,
            1,
            2,
            "2020-02-08",
            "2020-02-01",
            null,
            20,
            null
        ],
        [
            2,
            2,
            2,
            "2020-02-08",
            "2020-05-08",
            null,
            80,
            null
        ],
        [
            3,
            3,
            2,
            "2020-02-08",
            "2020-09-08",
            null,
            80,
            null
        ]
    ]
}

根据谷歌

这是他们格式化数据的方式：

  data.addRows([
    ['2014Spring', 'Spring 2014', 'spring',
     new Date(2014, 2, 22), new Date(2014, 5, 20), null, 100, null],
    ['2014Summer', 'Summer 2014', 'summer',
     new Date(2014, 5, 21), new Date(2014, 8, 20), null, 100, null]
  ]);

这是从我的控制台看到的我的数据格式：

    []
0: (8) [1, 1, 2, "2020-02-08", "2020-02-01", null, 20, null]
1: (8) [2, 2, 2, "2020-02-08", "2020-05-08", null, 80, null]
2: (8) [3, 3, 2, "2020-02-08", "2020-09-08", null, 80, null]
length: 3
__proto__: Array(0)

我不知道错误是什么，有人可以在这里给我一些指导吗？

4

0 回答 0