时间戳

首页 > 解决方案 > 如何在具有不同数据类型的谷歌图表时间轴中动态添加行

javascript - 如何在具有不同数据类型的谷歌图表时间轴中动态添加行

问题描述

我正在做一个需要创建时间线的项目，并且我正在使用 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".出错。我将如何去做这件事。

标签： javascriptgoogle-visualization

解决方案

您需要将数据与 api 响应分开并使用如下。

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

推荐阅读