Javascript 如何在时间线谷歌图表中按行设置不同的颜色？

我用谷歌图表制作了一个时间线图，我要做的是发送一个带有颜色值的json​​还有其他信息，json的大小是可变的，我想做的是，每一行都用json中的颜色绘制，实现以下内容：

dataTable.addColumn({type: 'string', role: 'style'});

但它似乎不起作用，它给了我自动的颜色

下面是我的图的一个图像，带有defautl抛出的颜色，而不是json中的颜色

例如，在本例中，“生产”必须是橙色，“融合”必须是紫色

这是我的代码：

function drawChart() {
        $(".timeline").each(function () {
            var obje = {{ devicejson|safe }};
            var elem = $(this),
                id = elem.attr('id');
            var container = document.getElementById(id);
            var chart = new google.visualization.Timeline(container);
            var dataTable = new google.visualization.DataTable();
            dataTable.addColumn({type: 'string', id: 'Role'});
            dataTable.addColumn({type: 'string', id: 'Name'});
            dataTable.addColumn({type: 'date', id: 'Start'});
            dataTable.addColumn({type: 'date', id: 'End'});
            dataTable.addColumn({type: 'string', id: 'TimeEst'});
            dataTable.addColumn({type: 'string', role: 'style'});
            for (n = 0; n < obje.length; ++n) {
                if (obje[n].device_id == id) {
                    dataTable.addRows([
                        ['Department', obje[n].digitaloutput_user_description, new Date('"' + obje[n].startdatetime + '"'), new Date('"' + obje[n].enddatetime + '"'), obje[n].lighstate_user_description, obje[n].color],
                    ]);
                    var options = {
                        tooltip: {isHtml: true},
                        timeline: {
                            showRowLabels: false,
                        },
                        avoidOverlappingGridLines: false,
                        {#hAxis: {format: 'dd-MMM-yyyy HH:mm:ss'}#}

                    };
                }
            }

            for (n = 0; n < obje.length; ++n) {
                if (obje[n].device_id == id) {
                    console.log(obje[n].color)

                }
            }

            var formatTime = new google.visualization.DateFormat({
                pattern: 'yyyy-MM-dd HH:mm:ss a'
            });

            var view = new google.visualization.DataView(dataTable);
            view.setColumns([0, 1, {
                role: 'tooltip',
                type: 'string',
                calc: function (dt, row) {
                    // build tooltip
                    var dateBegin = dt.getValue(row, 2);
                    var dateEnd = dt.getValue(row, 3);
                    var oneHour = (60 * 1000);
                    var duration = (dateEnd.getTime() - dateBegin.getTime()) / oneHour;

                    var tooltip = '<div><div class="ggl-tooltip"><span>';
                    tooltip += dt.getValue(row, 0) + ':</span>&nbsp;' + dt.getValue(row, 1) + '</div>';
                    tooltip += '<div class="ggl-tooltip"><div>' + formatTime.formatValue(dateBegin) + ' - ';
                    tooltip += formatTime.formatValue(dateEnd) + '</div>';
                    tooltip += '<div><span>Duration: </span>' + duration.toFixed(0) + ' minutes</div>';
                    tooltip += '<div><span>Estate: </span>' + dt.getValue(row, 5) + '</div></div>';

                    return tooltip;
                },
                p: {html: true}
            }, 2, 3]);

            google.visualization.events.addListener(chart, 'ready', function () {
                var labels = container.getElementsByTagName('text');
                Array.prototype.forEach.call(labels, function (label) {
                    label.setAttribute('font-weight', 'normal');
                });
            });

            chart.draw(view.toDataTable(), options);
        })
    }

函数绘图图（）{
$（“.timeline”）。每个（函数（）{
var obje={devicejson | safe}}；
var elem=$（此），
id=元素属性（“id”）；
var container=document.getElementById（id）；
var chart=newgoogle.visualization.Timeline（容器）；
var dataTable=new google.visualization.dataTable（）；
addColumn（{type:'string'，id:'Role'}）；
addColumn（{type:'string'，id:'Name'}）；
addColumn（{type:'date'，id:'Start'}）；
addColumn（{type:'date'，id:'End'}）；
addColumn（{type:'string'，id:'TimeEst'}）；
addColumn（{type:'string'，role:'style'}）；
对于（n=0；n

在时间轴图表上，样式角色仅在用作第三列（列索引2）时有效

请参阅以下工作片段

google.charts.load（'current'{
“包”：[“时间线”]
});
google.charts.setOnLoadCallback（drawChart）；
函数绘图图（）{
var container=document.getElementById（'timeline'）；
var chart=newgoogle.visualization.Timeline（容器）；
var dataTable=new google.visualization.dataTable（）；
dataTable.addColumn({
键入：“字符串”，
id:'总统'
});
dataTable.addColumn({
键入：“字符串”，
id:'酒吧'
});
addColumn（{/在时间线图表上，样式角色仅在用作第三列（列索引2）时才起作用

请参阅以下工作片段


google.charts.load（'current'{
“包”：[“时间线”]
});
google.charts.setOnLoadCallback（drawChart）；
函数绘图图（）{
var container=document.getElementById（'timeline'）；
var chart=newgoogle.visualization.Timeline（容器）；
var dataTable=new google.visualization.dataTable（）；
dataTable.addColumn({
键入：“字符串”，
id:'总统'
});
dataTable.addColumn({
键入：“字符串”，
id:'酒吧'
});
dataTable.addColumn({//这个问题运气好吗？请使用投票按钮附近的复选标记将答案标记为已接受吗？这将允许我将其他问题标记为此问题的副本…这个问题运气好吗？请使用投票按钮附近的复选标记将答案标记为已接受吗？这将允许我标记其他问题问题是这个问题的副本。。。