Есть ли способ нанести горизонтальную линию поперек разброса на диаграммы Google? - PullRequest
Новая
       9

Есть ли способ нанести горизонтальную линию поперек разброса на диаграммы Google?

1 голос
/ 24 октября 2019

Я пытаюсь построить горизонтальную целевую линию поперек разброса при y = 10. Пожалуйста помоги.

Я пытался сделать это с помощью комбинированной диаграммы, но я теряю свою аннотацию / текст 

<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 вместолинии тренда. Спасибо.

enter image description here

1 Ответ

1 голос
/ 24 октября 2019

обязательно добавьте данные для горизонтальной линии после столбцов аннотаций ... 

  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>
...