Google 可视化高亮单条网格线

Question

如何突出显示单条网格线？我想设置一个光学温度限制在35°C。

谢谢！我现在已将它添加到我的代码中，但它不起作用....你看到我的错误了吗？还是我没听懂您的解释？这是编辑后的版本：

  //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']
 });

Answer 1

为所有行

添加另一个值设置为 35 的系列

此处，数据视图用于为光学温度限制添加计算列

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>

Answer 2

这不是最好和最安全的方法，但我没有在 google 文档中找到任何内容：

您可以使用 Jquery 我已经在 google 文档中的示例中尝试过它并且它有效 click

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

Answer 3

一个简单的方法是将 vAxis 基线设置为您想要的值，比如 35，然后更改基线颜色。然而，没有改变这条线的宽度的选项，所以如果你需要，你应该按照上面的建议添加一个系列来绘制这条线，并设置它的线宽。

Google 可视化高亮单条网格线

Google Visualization highlight single grid line

javascript

google-visualization

gridlines