如何在Google Charts中始终显示折线或柱状图阴影？

嘿伊万，我刚好研究过这个问题！Google Charts本身确实没有直接的配置项让折线或柱状图始终显示阴影，但我们可以通过操作图表渲染后的SVG元素，实现和悬停图例时完全一致的阴影效果，下面给你具体的实现方案：

一、折线图实现方法 #

核心思路是在图表渲染完成后，手动给折线添加和默认悬停效果一致的SVG阴影滤镜：

google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawLineChart);

function drawLineChart() {
  // 构造示例数据
  var data = google.visualization.arrayToDataTable([
    ['Year', 'Sales', 'Expenses'],
    ['2013',  1000,      400],
    ['2014',  1170,      460],
    ['2015',  660,       1120],
    ['2016',  1030,      540]
  ]);

  var options = {
    title: 'Company Performance',
    curveType: 'function',
    legend: { position: 'bottom' }
  };

  var chart = new google.visualization.LineChart(document.getElementById('line_chart_container'));

  // 监听图表ready事件，渲染完成后添加阴影
  google.visualization.events.addListener(chart, 'ready', function() {
    var svg = chart.getContainer().querySelector('svg');
    // 定位折线元素（可根据实际SVG结构调整选择器）
    var linePaths = svg.querySelectorAll('path[stroke-miterlimit="10"]');

    // 创建和Google Charts默认悬停一致的阴影滤镜
    var shadowFilter = document.createElementNS('http://www.w3.org/2000/svg', 'filter');
    shadowFilter.setAttribute('id', 'persistentLineShadow');
    shadowFilter.setAttribute('x', '-20%');
    shadowFilter.setAttribute('y', '-20%');
    shadowFilter.setAttribute('width', '140%');
    shadowFilter.setAttribute('height', '140%');

    var dropShadow = document.createElementNS('http://www.w3.org/2000/svg', 'feDropShadow');
    dropShadow.setAttribute('dx', '0');
    dropShadow.setAttribute('dy', '3');
    dropShadow.setAttribute('stdDeviation', '3');
    dropShadow.setAttribute('flood-opacity', '0.3');

    shadowFilter.appendChild(dropShadow);
    svg.querySelector('defs').appendChild(shadowFilter);

    // 给每条折线应用阴影
    linePaths.forEach(function(line) {
      line.setAttribute('filter', 'url(#persistentLineShadow)');
    });
  });

  chart.draw(data, options);
}

关键说明： #

• 通过ready事件确保图表完全渲染后再操作SVG
• 阴影参数（偏移量、模糊度、透明度）和Google Charts默认悬停效果完全匹配
• 如果折线选择器失效，可打开浏览器开发者工具查看折线元素的属性，调整querySelectorAll的参数

二、柱状图实现方法 #

思路和折线图一致，只是需要定位柱状图的矩形元素：

google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawColumnChart);

function drawColumnChart() {
  var data = google.visualization.arrayToDataTable([
    ['Year', 'Sales', 'Expenses'],
    ['2013',  1000,      400],
    ['2014',  1170,      460],
    ['2015',  660,       1120],
    ['2016',  1030,      540]
  ]);

  var options = {
    title: 'Company Performance',
    legend: { position: 'bottom' }
  };

  var chart = new google.visualization.ColumnChart(document.getElementById('column_chart_container'));

  google.visualization.events.addListener(chart, 'ready', function() {
    var svg = chart.getContainer().querySelector('svg');
    // 定位柱状图的柱子元素
    var barRects = svg.querySelectorAll('rect[stroke="#ffffff"]');

    // 创建阴影滤镜（复用折线图的逻辑）
    var shadowFilter = svg.querySelector('#persistentBarShadow');
    if (!shadowFilter) {
      shadowFilter = document.createElementNS('http://www.w3.org/2000/svg', 'filter');
      shadowFilter.setAttribute('id', 'persistentBarShadow');
      shadowFilter.setAttribute('x', '-20%');
      shadowFilter.setAttribute('y', '-20%');
      shadowFilter.setAttribute('width', '140%');
      shadowFilter.setAttribute('height', '140%');

      var dropShadow = document.createElementNS('http://www.w3.org/2000/svg', 'feDropShadow');
      dropShadow.setAttribute('dx', '0');
      dropShadow.setAttribute('dy', '3');
      dropShadow.setAttribute('stdDeviation', '3');
      dropShadow.setAttribute('flood-opacity', '0.3');

      shadowFilter.appendChild(dropShadow);
      svg.querySelector('defs').appendChild(shadowFilter);
    }

    // 给每个柱子应用阴影
    barRects.forEach(function(bar) {
      bar.setAttribute('filter', 'url(#persistentBarShadow)');
    });
  });

  chart.draw(data, options);
}

额外注意事项 #

• 如果图表会动态更新（比如切换数据），需要在每次draw完成后重新执行添加阴影的逻辑，建议把添加阴影的代码封装成独立函数
• Google Charts的SVG结构可能会随版本更新变化，若选择器失效，及时通过开发者工具调整元素定位规则

内容的提问来源于stack exchange，提问作者Ivan Antić