如何在谷歌折线图中添加最小和最大阈值线

Question

我在我的网络应用程序上添加了折线图，我需要添加或突出显示一条以红色显示的常量线，表示此参数的最小阈值和此参数的最大阈值。我已经去了谷歌折线图配置选项，但找不到任何可用的此类选项。我想知道到目前为止，其他人怎么也没有在社区上问这个问题。在搜索大量解决此问题的方法时，我发现了一个与此相关的小提琴，但它正在添加另一个线条参数，并将工具提示显示为该值，我不想在折线图上显示。另外，将其添加为图表中的另一行，我发现效率低下。

提前感谢您的帮助。

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 图表版本不再持续更新。请从现在开始使用新的静态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%'}
    ]
     }
  }