Google Visualization highlight single grid line

▼魔方 西西 提交于 2020-01-14 14:05:59

问题


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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!