如何在 TimeLine Google 图表中按行设置不同的颜色？

Question

我有一个用谷歌图表制作的时间线图表，我所做的是发送一个带有颜色值和其他信息的 json，json 的大小是可变的，我想要做的是每一行都涂上它在json，执行以下操作：

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

但它似乎不起作用，它给我自动 colors。

以下是我的图表的图像，其中包含 defautl 抛出的 colors，而不是我在 json 中的 colors。

例如，在这种情况下，“Production”必须为橙色，“Fusion”必须为紫色。

这是我的代码：

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);
        })
    }

Answer 1

在时间线图表上，样式角色仅在用作第三列（列索引 2）时起作用。

请参阅以下工作片段...

 google.charts.load('current', { 'packages': ['timeline'] }); google.charts.setOnLoadCallback(drawChart); function drawChart() { var container = document.getElementById('timeline'); var chart = new google.visualization.Timeline(container); var dataTable = new google.visualization.DataTable(); dataTable.addColumn({ type: 'string', id: 'President' }); dataTable.addColumn({ type: 'string', id: 'Bar' }); dataTable.addColumn({ // <-- add style role here... type: 'string', role: 'style' }); dataTable.addColumn({ type: 'date', id: 'Start' }); dataTable.addColumn({ type: 'date', id: 'End' }); dataTable.addRows([ ['Washington', 'test1', 'cyan', new Date(1789, 3, 30), new Date(1797, 2, 4)], ['Adams', 'test2', 'magenta', new Date(1797, 2, 4), new Date(1801, 2, 4)], ['Jefferson', 'test3', 'lime', new Date(1801, 2, 4), new Date(1809, 2, 4)] ]); chart.draw(dataTable); }

 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="timeline" style="height: 180px;"></div>