javascript - 面积图、谷歌图表上具有不同颜色的多条垂直线。悬停在文本上时问题行颜色消失

Question

请检查下图，其中显示了多条不同颜色的垂直线。这里的问题是，在悬停注释文本“测试”时，线条颜色会消失。

请检查下面的代码。

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 fiddle - http://jsfiddle.net/zcb9bk68/

Answer 1

Wee，据我所知，这是为了让元素保持绘制状态，而图表 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 
);  

看到这个 fiddle - http://jsfiddle.net/ckfh2yup/