Несколько вертикальных линий разных цветов на диаграмме с областями, диаграммах Google. Цвет линии проблемы исчезает при наведении на текст

Пожалуйста, проверьте изображение ниже, на котором показано несколько вертикальных линий разных цветов. Проблема здесь в том, что при наведении курсора на текст аннотации цвет строки «тест» исчезает.

введите здесь описание изображенияПроверьте приведенный ниже код.

var session_data = [["Date",{"role":"annotation"},"Value"],["2015-06-07",'test',861],["2015-06-08",'test',1381],["2015-06-09",'test',2351],["2015-06-10",'test',2125],["2015-06-11",'test',1970],["2015-06-12",'test',1745],["2015-06-13",'test',1079],["2015-06-14",'test',1087],["2015-06-15",'test',2221],["2015-06-16",'test',2176],["2015-06-17","Test ",1918],["2015-06-18",'test',1826],["2015-06-19",'test',1720],["2015-06-20",'test',937],["2015-06-21",'test',1094],["2015-06-22",'test',2170],["2015-06-23",'test',2085],["2015-06-24",'test',1952],["2015-06-25",'test',1865],["2015-06-26",'test',1674],["2015-06-27",'test',977],["2015-06-28",'test',1005],["2015-06-29",'test',2130],["2015-06-30",'test',1913],["2015-07-01",'test',1774],["2015-07-02",'test',1891],["2015-07-03",'test',1572],["2015-07-04",'test',979],["2015-07-05",'test',1024],["2015-07-06",'test',2163],["2015-07-07",'test',2041]]; 

function getRandomColor() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}


           var chart = new google.visualization.AreaChart(document.querySelector('#linechart_material'));

  google.visualization.events.addListener(chart, 'ready', function() {
      var rects = document.getElementById('linechart_material')
                  .querySelector('svg')
                  .querySelector('g:nth-of-type(2)')
                  .querySelector('g:nth-of-type(1)')
                  .querySelector('g:nth-of-type(4)')
                  .querySelectorAll('rect')
      for (var i=0;i<rects.length;i++) {
          rects[i].setAttribute('stroke', getRandomColor());
          rects[i].setAttribute('stroke-width', '5');     
      }     
  });    


            chart.draw(data, {
                width: 1600,
                height: 600,
                annotation: {
                    1: {
                        style: 'line',
                        color: 'black'
                    },
                    2:{
                        style: 'line',
                        color: 'blue'

                    }
                },
                vAxis: {
                    gridlines: {
                        color: 'none'
                    },
                    baselineColor: 'green'
                },
                hAxis: {
                    gridlines: {
                        color: 'none'
                    }
                },
                series: {
                    0: {color: '#e7711b'},
                    1: {color: '#e2431e'},
                    2: {color: '#f1ca3a'},
                    3: {color: '#6f9654'},
                    4: {color: '#1c91c0'},
                    5: {color: '#43459d'},
                }
            });


        }

google.load('visualization', '1', {packages: ['corechart'], callback: drawVisualization});

Пожалуйста, проверьте скрипт js - http://jsfiddle.net/zcb9bk68/


javascript charts google-visualization jsapi
person Sashant Pardeshi    schedule 20.07.2015    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Ви, насколько я понимаю, вы должны держать элементы окрашенными, а API диаграмм понятия не имеет, как вы настроили его стили. Единственное решение, которое я здесь вижу, — это оставлять линии нарисованными самостоятельно после того, как каждый раз API диаграммы перекрашивает их.

Для этой цели вы можете использовать

onmouseout

а также

onmouseover

События.

var updateElementColor = function(element){
              var color = element.getAttribute('my-color');
          if(!color){
              color = getRandomColor();
          }
          element.setAttribute('stroke', color);
          element.setAttribute('my-color', color);
          element.setAttribute('stroke-width', '5'); 
};

var updateColorsCallback = function() {
      var rects = document.getElementById('linechart_material')
                  .querySelector('svg')
                  .querySelector('g:nth-of-type(2)')
                  .querySelector('g:nth-of-type(1)')
                  .querySelector('g:nth-of-type(4)')
                  .querySelectorAll('rect')
      for (var i=0;i<rects.length;i++) {
          updateElementColor(rects[i]);
      }         
};
google.visualization.events.addListener(chart, 'ready', 
     updateColorsCallback 
);    
google.visualization.events.addListener(chart, 'onmouseout', 
     updateColorsCallback 
);  
google.visualization.events.addListener(chart, 'onmouseover', 
     updateColorsCallback 
);

См. эту скрипку - http://jsfiddle.net/ckfh2yup/

person Ivan    schedule 20.07.2015
comment
не могли бы вы помочь, как скрыть / удалить текст «тест» - person Sashant Pardeshi; 20.07.2015
comment
@SashantPardeshi, не уверен, что для этого есть встроенный способ, поскольку основная цель аннотаций - показать некоторый текст. Для этого вам, вероятно, следует найти другой способ построения такой диаграммы. - person Ivan; 20.07.2015
comment
@SashantPardeshi, ну, если честно, вы МОЖЕТЕ использовать тот же подход, который вы уже использовали в случае рисования линий ... Я имею в виду, что могу вручную удалить все элементы аннотаций из DOM, но это не относится к этому вопросу .. .пожалуйста, отметьте вопрос как ответ, если он полезен - person Ivan; 20.07.2015