Question

我正在使用谷歌图表时间轴使用谷歌图表时间轴绘制下面的数据。

[{"id":59291,"idJob":2,"idOperation":3,"start":0,"end":3,"machine":1},    {"id":59292,"idJob":2,"idOperation":2,"start":3,"end":7,"machine":1},{"id":59293,"idJob":1,"idOperation":1,"start":7,"end":8,"machine":1},{"id":59294,"idJob":2,"idOperation":1,"start":8,"end":11,"machine":1},{"id":59295,"idJob":1,"idOperation":2,"start":0,"end":1,"machine":2},{"id":59296,"idJob":2,"idOperation":5,"start":7,"end":14,"machine":3},{"id":59297,"idJob":1,"idOperation":4,"start":1,"end":10,"machine":4},{"id":59298,"idJob":1,"idOperation":3,"start":8,"end":21,"machine":5},{"id":59299,"idJob":2,"idOperation":6,"start":3,"end":10,"machine":6},{"id":59300,"idJob":2,"idOperation":4,"start":11,"end":14,"machine":6},{"id":59301,"idJob":2,"idOperation":9,"start":10,"end":13,"machine":7},{"id":59302,"idJob":1,"idOperation":6,"start":13,"end":14,"machine":7},{"id":59303,"idJob":2,"idOperation":8,"start":14,"end":16,"machine":7},{"id":59304,"idJob":2,"idOperation":7,"start":16,"end":21,"machine":7},{"id":59305,"idJob":1,"idOperation":5,"start":21,"end":23,"machine":7},{"id":59306,"idJob":1,"idOperation":9,"start":14,"end":17,"machine":8},{"id":59307,"idJob":2,"idOperation":12,"start":18,"end":21,"machine":8},{"id":59308,"idJob":2,"idOperation":10,"start":21,"end":26,"machine":8},{"id":59309,"idJob":1,"idOperation":8,"start":26,"end":28,"machine":8},{"id":59310,"idJob":2,"idOperation":11,"start":18,"end":24,"machine":9},{"id":59311,"idJob":1,"idOperation":7,"start":24,"end":27,"machine":9},{"id":59312,"idJob":2,"idOperation":14,"start":21,"end":25,"machine":10},{"id":59313,"idJob":2,"idOperation":13,"start":26,"end":28,"machine":10},{"id":59314,"idJob":2,"idOperation":15,"start":28,"end":28,"machine":10},{"id":59315,"idJob":1,"idOperation":10,"start":28,"end":29,"machine":10}]

我有n个作业和n_i操作。操作名称应为“id_job，id_operation”，例如，作业1的操作1等于“1,1”。

Google图表时间轴根据操作名称定义操作的颜色，因此对于具有相同名称的所有操作，它将选择相同的颜色。我想要做的是创建图表（与同一作业相同的颜色），如图1所示，但每个操作的文本锚点都有各自的名称。如果我尝试为每个操作定义相应的名称，我最终会得到图2所示的图表。

图1。

图2。

我的javascript代码。

function timelineChart() {
    $.ajax({
        url : "operations",
        dataType : "json",
        success : function(result) {
            google.charts.load('current', {
                'packages' : [ 'timeline' ]
            });
            google.charts.setOnLoadCallback(function() {
                drawChart2(result);
            });
        }
    });

    function drawChart2(result) {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Machine');
        data.addColumn('string', 'Job');
        data.addColumn('date', 'Start Date');
        data.addColumn('date', 'End Date');

        var dataArray = [];
        $.each(result, function(i, obj) {
            dataArray.push([ 'M' + obj.machine, getIdJob(obj) + "," + getIdOp(obj), new Date(obj.start * 1000), new Date(obj.end * 1000) ])
        });

        data.addRows(dataArray);

        var options = {
            timeline : {
                groupByRowLabel : true,
                showRowLabels : true,
                showBarLabels : true
            }
        };

        var chart = new google.visualization.Timeline(document.getElementById('chart_timeline'));

        chart.draw(data, options);
    }
}

function getIdJob(obj) {
    if (obj.idJob == 0) {
        return 'Unavailability';
    } else {
        return obj.idJob;
    }
}

function getIdOp(obj) {
    return obj.idOperation;
}

Answer 1

我们可以定义一个额外的列“类别”，并为每个类别定义一个颜色的地图。您可以使用选项中的颜色并避免额外列的错误，您可以使用DataView隐藏类别列。

Answer 2

下面的代码可能适用于您的情况。您可以定义颜色映射，然后使用它来绘制操作。您必须使用DataView并在绘制之前删除类别。

function drawChart2(result) {
    var container = document.getElementById('chart_timeline');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();

    dataTable.addColumn({type : 'string',id : 'Machine'});
    dataTable.addColumn({type : 'string',id : 'Category'});
    dataTable.addColumn({type : 'string',id : 'ID'});
    dataTable.addColumn({type : 'date', id : 'Start'});
    dataTable.addColumn({type : 'date', id : 'End'});

    var colorMap = {};
    var dataArray = [];
    $.each(result, function(i, obj) {
        colorMap['Category' + getIdJob(obj)] = randomColor();
        dataArray.push(
        [ 'M' + obj.machine, 'Category'+getIdJob(obj), getIdJob(obj) + "," + getIdOp(obj), new Date(obj.start * 1000), new Date(obj.end * 1000) ])
    });

    dataTable.addRows(dataArray);

    var colors = [];
    for (var i = 0; i < dataTable.getNumberOfRows(); i++) {
        colors.push(colorMap[dataTable.getValue(i, 1).toString()]);
    }

    var options = {
        timeline : {
            groupByRowLabel : true,
            showRowLabels : true,
            showBarLabels : true
        },
        colors : colors
    };
    console.log(dataTable);

    // use a DataView to hide the category column from the Timeline
    var view = new google.visualization.DataView(dataTable);
    view.setColumns([ 0, 2, 3, 4 ]);

    chart.draw(view, options);
}

某些时间线操作的自定义名称和相同颜色（谷歌图表时间轴）

2 个答案: