在 Google 图表中突出显示单个网格线答案

【问题标题】：Higlight single Grid Line in Google Chart在 Google 图表中突出显示单个网格线
【发布时间】：2018-04-10 06:18:40
【问题描述】：

是否可以在 Google 图表中突出显示折线图上 y 轴的单个网格线，即提供不同的颜色或画得更粗？

它的外观示例：

【问题讨论】：

标签： charts google-visualization linechart

【解决方案1】：

您可以在图表的'ready' 事件上手动更改网格线...

线条将由 svg <rect> 元素表示，
y 轴网格线将具有 height="1" 和 fill="#cccccc"（默认情况下）
对于双 y 图表，每个网格线将有 2 个<rect> 元素...

请参阅以下工作 sn-p...

google.charts.load('current', {
  packages:['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['x', 'y0', 'y1'],
    [1, 2, 300],
    [2, 3, 400],
    [3, 4, 500]
  ]);

  var options = {
    chartArea: {
      height: '100%',
      width: '100%',
      top: 48,
      left: 48,
      right: 64,
      bottom: 48
    },
    colors: ['#aa1221', '#0e2e22', '#6feee4'],
    height: '100%',
    series: {
      1: {
        targetAxisIndex: 1
      }
    },
    width: '100%',
  };

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

  google.visualization.events.addListener(chart, 'ready', function () {
    var gridlines = container.getElementsByTagName('rect');
    var highlightIndex = 2;
    var lineIndex = 0;
    var lineCount = 0;

    // determine number of gridlines
    Array.prototype.forEach.call(gridlines, function(line) {
      if ((line.getAttribute('height') === '1') && (line.getAttribute('fill') === '#cccccc')) {
        lineCount++;
      }
    });

    // gridlines doubled on dual y charts
    lineCount = lineCount / 2;

    // change gridlines
    Array.prototype.forEach.call(gridlines, function(line) {
      if ((line.getAttribute('height') === '1') && (line.getAttribute('fill') === '#cccccc')) {
        if (lineIndex === highlightIndex) {
          // change color
          line.setAttribute('fill', '#4a148c');
          // change "width"
          line.setAttribute('height', '5');
          // center on original y coord
          line.setAttribute('y', parseFloat(line.getAttribute('y')) - 2);
        }
        lineIndex++;
        if (lineIndex >= lineCount) {
          lineIndex = 0;
        }
      }
    });
  });

  chart.draw(data, options);
  window.addEventListener('resize', function () {
    chart.draw(data, options);
  }, false);
});

html, body {
  height: 100%;
  margin: 0px 0px 0px 0px;
  overflow: hidden;
  padding: 0px 0px 0px 0px;
}

.chart {
  height: 100%;
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="chart" id="chart_div"></div>

【讨论】：

【解决方案2】：

是的，你可以这样做

      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable
            ([['X', 'Style 1', 'Syle 2',
               'Style 3'],
              [1, 2, 3, 4],
              [2, 3, 4, 5],
              [3, 4, 5, 6]
        ]);

        var options = {
          hAxis: { maxValue: 5 },
          vAxis: { maxValue: 5 },
          chartArea: { width: 380 },

          series: {
            0: { lineWidth: 4 },
            1: { lineDashStyle: [2, 2] },
            2: { lineDashStyle: [4, 4] }
          },
           colors: ['#aa1221', '#0e2e22', '#6feee4']
        };

        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, options);
}

HTML

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

详细阅读可以修改的内容Customizing Lines

【讨论】：