Google Visualization highlight single grid line

问题

how can I highlight a single grid line? I would like to set an optical temperature limit at 35 ° C.

Thanks! I have now added it to my code, but it does not work .... do you see my mistake? Or did I not understand something in your explanation? Here is the edited version :

  //Google Chart
   google.charts.load('current', {
   callback: function drawChart(peanut) {
     const div = document.createElement('div');
     div.id = peanut.color + peanut.mac.split(':').join('');
     $('#charts').appendChild(div);
     peanut.data = new google.visualization.DataTable();
     peanut.data.addColumn('datetime', 'Time');
     peanut.data.addColumn('number', '🥜 ' + peanut.label);
     for (var i = 0, len = localStorage.length; i < len; i++) {
       let dateTime = new Date(parseInt(localStorage.key(i)));
       let item = JSON.parse(localStorage.getItem(localStorage.key(i)));
       if (item.peanutMac === peanut.mac) {
         if (item.temperatureCelsius) {
           let temperature = parseFloat(item.temperatureCelsius);
           peanut.data.addRows([ [dateTime, temperature] ]);
         } else if (item.alert) {
           let data = parseInt(item.alert);
           peanut.data.addRows([ [dateTime, data] ]);
         }
       }
     }
     if (peanut.type == 'thermo') {
     peanut.chart = new google.visualization.LineChart($('#' + div.id));

       peanut.chartOptions = {
         interpolateNulls: true,
         fontName: 'Roboto',
         curveType: 'function',
         colors: [peanut.rgbColor],
         width: document.body.clientWidth,
         height: (window.innerHeight - 224) / 2,
         legend: 'none',
          lineWidth: 3,
          vAxis: { 
            format: '#.## °C',
            ticks: [15.00, 20.00, 25.00, 30.00, 35.00, 40.00]
          },
          hAxis: {
            gridlines: { 
             color: '#fff'
           }
         }
       };

      peanut.viewColumns = [];
      $.each(new Array(data.getNumberOfColumns()), function (colIndex) {
      peanut.viewColumns.push(colIndex);
      });
      peanut.viewColumns.push({
      calc: function () {
       return 35;
       },
           label: 'optical temperature limit',
           type: 'number'
       });
     } 

    peanut.view = new google.visualiation.DataView(data);
    peanut.view.setColumns(viewColumns);

     if (peanut.data.getNumberOfRows()) {
       peanut.chart.draw(peanut.view, peanut.chartOptions);
     }
   }
     packages:['corechart', 'table']
 });

回答1:

add another series with the value set to 35 for all rows

here, a data view is used to add a calculated column for the optical temperature limit

google.charts.load('current', {
  callback: function () {
    var data = new google.visualization.DataTable();
    data.addColumn('number', 'x');
    data.addColumn('number', 'y0');
    data.addColumn('number', 'y1');
    data.addColumn('number', 'y2');
    data.addRows([
      [1,  32.8, 20.8, 21.8],
      [2,  30.9, 29.5, 32.4],
      [3,  25.4,   27, 25.7],
      [4,  21.7, 28.8, 20.5],
      [5,  21.9, 27.6, 20.4]
    ]);

    var options = {
      interpolateNulls: true,
      fontName: 'Roboto',
      curveType: 'function',
      legend: 'none',
      lineWidth: 3,
      vAxis: {
        format: '#.## °C',
        ticks: [20.00, 25.00, 30.00, 35.00, 40.00]
      },
      hAxis: {
        gridlines: {
          color: '#fff'
        }
      }
    };

    var viewColumns = [];
    $.each(new Array(data.getNumberOfColumns()), function (colIndex) {
      viewColumns.push(colIndex);
    });

    viewColumns.push({
      calc: function () {
        return 35;
      },
      label: 'optical temperature limit',
      type: 'number'
    });

    var view = new google.visualization.DataView(data);
    view.setColumns(viewColumns);

    var chart = new google.visualization.LineChart($('#chart').get(0));
    chart.draw(view, options);
  },
  packages:['corechart', 'table']
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>

回答2:

Its not the best and safest way but I didnt find something on the google documentation:

You could use Jquery for it Ive tried it on the example from google docs and it works click

var line = $("svg g line")[4]
$(line).attr('stroke','red');

回答3:

A simple way is to set the vAxis baseline to the value you want, say 35, and change the baselineColor. There is no option to change the width of this line, however, so if you need that, you should follow the suggestion above to add a series just to draw this line, and set its lineWidth.

来源：https://stackoverflow.com/questions/44846437/google-visualization-highlight-single-grid-line