如何在 Google 折線圖中添加最小和最大閾值線

Question

我已經在我的 web 應用程序上添加了折線圖，我需要添加或突出顯示紅色的常量線，用於此參數的最小閾值和此參數的最大閾值。 我已經使用了Google Line Charts Configuration Options，但在其中找不到任何可用的此類選項。 我想知道其他人到目前為止還沒有在社區上問過這個問題。 在大量搜索此問題的解決方案時，我發現了一個與此相關的 Fiddle，但它正在添加另一個線參數，並將工具提示顯示為該值，我不想在折線圖上顯示該值。 此外，將其添加為圖表中的另一條線，我發現效率低下。

提前感謝您的幫助。

Answer 1

添加閾值線或標記沒有任何標准選項

添加另一個系列是唯一的方法

您可以使用以下選項禁用工具提示...

enableInteractivity: false

---

請參閱以下工作片段...

 google.charts.load('current', { callback: drawChart, packages:['corechart'] }); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua New Guinea', 'Rwanda', ''], ['2004/05', 165, 938, 522, 998, 450, 250], ['2005/06', 135, 1120, 599, 1268, 288, 250], ['2006/07', 157, 1167, 587, 807, 397, 250], ['2007/08', 139, 1110, 615, 968, 215, 250], ['2008/09', 136, 691, 629, 1026, 366, 250] ]); var options = { seriesType: "line", series: { 5: { type: "steppedArea", color: '#FF0000', visibleInLegend: false, areaOpacity: 0, enableInteractivity: false } } }; var chart = new google.visualization.LineChart(document.getElementById('chart_div')); chart.draw(data, options); }

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

---

注意：根據發行說明，建議加載較新的庫loader.js而不是jsapi ...

通過jsapi加載器保持可用的 Google Charts 版本不再持續更新。 請從現在開始使用新的 gstatic loader.js 。

這只會更改load語句，請參閱上面的代碼段...

Answer 2

您可以使用設置值覆蓋自動生成的刻度。

例如：

vAxes: {
  0: {
    title:'Left Axis Title',
    ticks: [
      0,
      {v:460, f:'Minimum Recommended'},
      {v:1840, f:'Maximum Safe'},
      {v:2300, f:'100%'}
    ]
     }
  }