【问题标题】:google timeLine chart谷歌时间线图
【发布时间】:2018-04-25 14:55:10
【问题描述】:

我正在尝试创建时间线图表,但我遇到了日期格式问题我收到了这个错误

(值无效日期与列索引 2 中的类型日期不匹配)

这是我的代码

google.charts.load("current", { packages: ["timeline"] });
google.charts.setOnLoadCallback(initTimeLineChart);

function initTimeLineChart(obj) {
    console.log(obj)
    var container = document.getElementById('timeline1');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({ type: 'string', id: 'DriverName' });
    dataTable.addColumn({ type: 'string', id: 'Activity' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    var datas = '';
    $.each(obj,
        function (i, v) {

            if (i === 0) {
                datas = '["' + v.DriverName + '", "' + v.Activity + '","' + convert(v.Start) + '","' + convert(v.End) + '"]';
            } else {
                datas = datas + ',["' + v.DriverName + '", "' + v.Activity + '","' + convert(v.Start) + '","' + convert(v.End) + '"]';
            }

        });
    datas = '[' + datas + ']';
    console.log(datas);
    dataTable.addRows(JSON.parse(datas));
    var options = {
        timeline: { singleColor: '#8d8' }
    };

    chart.draw(dataTable, options);
}
function convert(str) {
    var month, day, year, hours, minutes, seconds;
    var date = new Date(str),
        month = ("0" + (date.getMonth() + 1)).slice(-2),
        day = ("0" + date.getDate()).slice(-2);
    hours = ("0" + date.getHours()).slice(-2);
    minutes = ("0" + date.getMinutes()).slice(-2);
    year = ("20 "+date.getYear());
    console.log(date);
    return new Date(year, 0, day, hours, minutes, 0);
}

【问题讨论】:

  • 在哪一行出现错误?
  • dataTable.addRows(JSON.parse(datas));
  • 什么是drawChart?执行console.log(datas);行后在控制台得到什么请提供完整代码
  • 我得到了这样的东西:
  • [["FERRER Patrick", "BreakRest", "2018-04-24 00:00:00", "2018-04-24 05:59:00"], ["FERRER Patrick ", "开车", "2018-04-24 05:59:00", "2018-04-24 06:33:00"], ["FERRER Patrick", "工作", "2018-04-24 06 :33:00", "2018-04-24 06:38:00"], ["FERRER Patrick", "Drive", "2018-04-24 06:38:00", "2018-04-24 06 :39:00"], ["FERRER Patrick", "工作", "2018-04-24 06:39:00", "2018-04-24 06:53:00"], ["FERRER Patrick", “开车”、“2018-04-24 06:53:00”、“2018-04-24 07:29:00”]、[“FERRER Patrick”、“工作”、“2018-04-24 07:29” :00", "2018-04-24 07:32:00"],

标签: javascript datetime charts google-visualization timeline


【解决方案1】:

而不是从字符串构建数组,
只需使用实际数组以及 addRow mtheod

替换所有这些...

var datas = '';
$.each(obj,
    function (i, v) {

        if (i === 0) {
            datas = '["' + v.DriverName + '", "' + v.Activity + '","' + convert(v.Start) + '","' + convert(v.End) + '"]';
        } else {
            datas = datas + ',["' + v.DriverName + '", "' + v.Activity + '","' + convert(v.Start) + '","' + convert(v.End) + '"]';
        }

    });
datas = '[' + datas + ']';
console.log(datas);
dataTable.addRows(JSON.parse(datas));

与...

$.each(obj, function (i, v) {
  dataTable.addRow([
    v.DriverName,
    v.Activity,
    convert(v.Start),
    convert(v.End)
  ]);
});

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-04-13
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多