Question

我正在开展一个项目，我需要创建一个时间轴，而我正在使用Google Charts。我从Firebase和Trello API获取数据。我需要动态地将来自这些来源的数据附加到时间线。以下是我的代码。

var arrs = [];
var arr =  ["1", apiName, new Date(startDate[2], startDate[0], startDate[1]), new Date(due[2], due[0], due[1])];
arrs.push(arr);

function masterTimeline(){
    console.log(arrs);

    // Create seperate timelines
    google.charts.load("current", {packages:["timeline"]});
    google.charts.setOnLoadCallback(drawChart);

    // Function callback form google.charts.setOnLoadCallback
    function drawChart(){
        // Get container in HTML
        var container = document.getElementById("master");
        // Create a new Timeline object
        var chart = new google.visualization.Timeline(container);
        // Create a new DataTable object
        var dataTable = new google.visualization.DataTable();

        dataTable.addColumn({type: 'string', id: 'Number'})
        dataTable.addColumn({type: 'string', id: 'Title'});
        dataTable.addColumn({type: 'date', id: 'Start'});
        dataTable.addColumn({type: 'date', id: 'End'});

        // Give data to columns
        dataTable.addRows(arrs);

        // Set option to get rid of row labels
        var options = {
            timeline: {showRowLabels: false, barLabelStyle: { fontSize: 18 }},
            height: 200,
        };

        // Draw Table
        chart.draw(dataTable, options);
    }
}

理论上，这应该可行，但是当我运行它时，运行它时会出现Error: <text> attribute x: Expected length, "NaN".错误。我该怎么做呢。

Answer 1

您需要将数据与api响应分开并按以下方式使用。

dataTable.addRows([[Number, Title, Start, End]]);

如何使用不同的数据类型在Google图表时间轴中动态添加行

1 个答案: