google Charts разноцветные вертикальные аннотации

Question

Есть график lineChart от гугла. Вывожу вертикальные линии (как аннотации) в красном цвете. Прошу подсказать, возможен ли вывод вертикальных линий на графике различными цветами (например - красный в 21:00, зеленый в 22:00, снова красный в 23:00)?

Бьюсь над этим вопросом уже третий день - результата 0,000 ... Кстати, annotationText почему-то тоже не работает, но это вопрос третьего порядка. Хотя если кто-то подскажет почему - буду весьма признателен.

В оригинале jsonData получается из SQL-запроса, потому для простоты понимания и удобства эксперимента я представил его непосредственно в коде.

Код моего примера:

 <!DOCTYPE html>
 <html>
 <head>
 <script src="https://www.gstatic.com/charts/loader.js"></script>
    
 <div class="report" id="report">
 </div>
        
 <script type="text/javascript">
    google.charts.load('current', { 'packages': ['corechart'] });
    google.setOnLoadCallback(drawChart);
    var jsonData = '{"cols":'+
    '['+
        '{"id":"","label":"Дата/время","type":"string"},'+
        '{"id":"","label":"","role":"annotation","type":"string"},'+
        '{"id":"","label":"","role":"annotationText","type":"string"},'+
        '{"id":"","label":"Количество","type":"number"}'+
        
    '],'+
    '"rows":'+
    '['+
        '{"c":[{"v":"20:58:45"},    {"v":null}, {"v":null},     {"v":5}     ]},'+
        '{"c":[{"v":"21:00:45"},    {"v":"**"}, {"v":null},     {"v":10.00} ]},'+
        '{"c":[{"v":"22:00:45"},    {"v":""},   {"v":null},     {"v":5.00}  ]},'+
        '{"c":[{"v":"23:00:45"},    {"v":"**"}, {"v":"123"},    {"v":10.00} ]},'+
        '{"c":[{"v":"23:30:45"},    {"v":null}, {"v":null},     {"v":0}     ]}'+
    '],'+
    '"period_bgn":"2021-07-2219:58:45","period_end":"2021-07-2220:01:45","count":3,"sum":0.00,"minutes":3,"speed":0,"avg":0.00}';  
     
     function drawChart() {
         var _hgt = 400; 
         
         var data = new google.visualization.DataTable(jsonData);
         
         var options = {
             'width': 900,
             'height': 500,
             chartArea: { left: 50, top: 20, width: '100%', height: _hgt },
             legend: { position: 'none' },
             hAxis: {
                 slantedTextAngle: 90,
                 textStyle: {
                     fontName: 'Arial',
                     fontSize: 12,
                     bold: false,
                     italic: false
                 }
             },
             annotations: { 
                stem: {
                    color: 'red',
                    length: 150
                },
                    //style: 'line'
                },
             crosshair: { trigger: 'both', color: 'red', opacity: 0.5 },
             pointSize: 0
 
         };
 
         var chart = new google.visualization.LineChart(document.getElementById('report'));
         chart.draw(data, options);
     }
 </script>

БЛОГ НА HUSL

google Charts разноцветные вертикальные аннотации

Ответы (0 шт):