有没有办法在 Google 图表上绘制横跨散点的水平线？

Question

我正在尝试在 y=10 处绘制一条穿过散点的水平目标线。请帮忙。

我试过用组合图来做，但是我丢失了 annotation/text

<html>
<head>
<title>Testing</title>
   <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
   <script type="text/javascript">
     google.charts.load('current', {packages: ['corechart']});     
   </script>
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
function drawChart() {
   // Define the chart to be drawn.
   var data = new google.visualization.DataTable();
   data.addColumn('number', 'Age');
   data.addColumn('number', 'Weight');
   data.addColumn({type: 'string', role: 'annotation'});
   data.addColumn({type: 'string', role: 'annotationText'})
   data.addRows([[ 18,      22,'A','TEST1'],[ 14,      7.5,'B',null],[ 15,     13,'C','TEST2'],[ 14,      15,'D','TEST3'],[ 5.3,      3.9,'E',null],[ 9.5,    17,'F','TEST 4']]);



// Set chart options
   var options = {'title':'Age vs Weight',
      'width':550,
      'height':400,
      'legend': 'none',
      'trendlines':{0:{type:'linear',color:'green',}}
   };


   // Instantiate and draw the chart.
   var chart = new google.visualization.ScatterChart(document.getElementById('container'));
   chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);
</script>
</body>
</html>

我希望输出是相同的图表，带有绿线 @ y=10 而不是趋势线。谢谢

Answer 1

务必在注释列后添加水平线的数据...

  var data = new google.visualization.DataTable();
  data.addColumn('number', 'Age');
  data.addColumn('number', 'Weight');
  data.addColumn({type: 'string', role: 'annotation'});
  data.addColumn({type: 'string', role: 'annotationText'})
  data.addColumn('number', 'y0');

请参阅以下工作片段...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'Age');
  data.addColumn('number', 'Weight');
  data.addColumn({type: 'string', role: 'annotation'});
  data.addColumn({type: 'string', role: 'annotationText'})
  data.addColumn('number', 'y0');
  data.addRows([[ 18,      22,'A','TEST1',10],[ 14,      7.5,'B',null,10],[ 15,     13,'C','TEST2',10],[ 14,      15,'D','TEST3',10],[ 5.3,      3.9,'E',null,10],[ 9.5,    17,'F','TEST 4',10]]);

  var options = {'title':'Age vs Weight',
    width: 550,
    height: 400,
    legend: 'none',
    trendlines: {0:{type:'linear',color:'green',}},
    seriesType: 'scatter',
    series: {
      1: {
        type: 'line'
      }
    }
  };

  var chart = new google.visualization.ComboChart(document.getElementById('container'));
  chart.draw(data, options);
});

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

有没有办法在 Google 图表上绘制横跨散点的水平线？

Is there a way to Plot a horizontal line across scatter on Google charts?

html

charts

google-visualization