Question

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

提前感谢您的帮助。

Answer 1

没有添加阈值行或标记的标准选项

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

您可以使用以下选项禁用工具提示...

enableInteractivity: false

请参阅以下工作代码段...

＆＃13;

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);
}

＆＃13;

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

＆＃13;

注意：建议根据release notes ...

加载较新的库loader.js而不是jsapi

通过jsapi加载程序保留的Google图表版本不再一致更新。请从现在开始使用新的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%'}
    ]
     }
  }

如何在Google Line Charts中添加最小和最大阈值线

2 个答案: