Googleの視覚化が単一のグリッドラインを強調表示

Question

どのように1つのグリッドラインを強調表示できますか？私は、35℃で

おかげで、光、温度の上限を設定したいと思います！私は今、自分のコードに追加しましたが、うまくいきません....あなたは私の間違いを見ますか？あなたの説明の中で何かを理解できなかったのですか？ここ が編集されたバージョンである：

//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のドキュメントに何かを見つけるdidntは：

IVEがGoogleドキュメントからの例でそれを試してみましたそれのためのjQueryを使用することができ、それが click

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

の作品

Answer 3

単純な方法は、vAxisベースラインを希望の値、たとえば35に設定し、baselineColorを変更することです。ただし、この行の幅を変更するオプションはありません。必要な場合は、上の提案に従って、この行を描画するだけの系列を追加し、その行幅を設定する必要があります。