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

Question

我在我的网络应用程序中添加了折线图，我需要添加或突出显示一条以红色显示的常量线，用于此参数的最小阈值和此参数的最大阈值。我去了 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，根据release notes...

The version of Google Charts that remains available via the jsapi loader is no longer being updated consistently. Please use the new gstatic loader.js from now on.

这只会更改 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%'}
    ]
     }
  }

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

How can I add min and max Threshold line in Google Line Charts

javascript

charts

linechart

google-visualization