x 축과 y 축을 Google 흩어진 플롯의 평균 점에 대한 선으로 그릴 수 있습니까?

Question

나는 모든 점을 플롯하고 평균 점도 흩어져있는 그림이 있습니다. 내가 원하는 것은 흩어져있는 플롯의 평균 포인트에 대해 x 축과 y 축을 그려 보는 것입니다. 가능한가? 아래는 나의 코드 스 니펫이다.

CODE :

function drawChart(paramObj) 
    { 
     if (paramObj == 'undefined') { 
      alert('Something wrong with configuration'); 
      return false; 
     } 
     var data = new google.visualization.DataTable(); 
     var addRows = new Array(); 
     var chart = null; 
     var headers = null; 
     jQuery.each(paramObj.dataArray.split('\n'), function (index, value) { 
      var tabs = value.split('\t'); 

      if (tabs.length != 7) { 
       return; 
      } 


      if (index != undefined && index == 0) { 
       headers = tabs; 
       data.addColumn('number', dfv(1, headers, '')); 
       data.addColumn('number', dfv(2, headers, '')); 

      } else { 

       var name  = dfv(0, tabs, ''); 
       var xval  = parseFloat(parseFloat(dfv(1, tabs, '')).toFixed(2)); 
       var yval  = parseFloat(parseFloat(dfv(2, tabs, '')).toFixed(2)); 
       var xval_ori = parseFloat(parseFloat(dfv(3, tabs, '')).toFixed(2)); 
       var yval_ori = parseFloat(parseFloat(dfv(4, tabs, '')).toFixed(2)); 
       var opt1_val = dfv(5, tabs, ''); 
       var opt2_val = dfv(6, tabs, ''); 

       if (name == 'Average') { 
        var test = [ 
         xval,yval, 
         name + '\n' + 
         dfv(3,headers,'') + ' = ' + xval_ori + ' ' + 
         dfv(4,headers,'') + ' = ' + yval_ori + '\n' + 
         ((opt1_val != ' ') ? dfv(5,headers,'') + ' = ' + opt1_val : '') + ' ' + 
         ((opt2_val != ' ') ? dfv(6,headers,'') + ' = ' + opt2_val : ''), 
         'point { size: 4; shape-type: circle; fill-color: red; }' 
        ]; 
       } else { 
        var test = [ 
         xval,yval, 
         name + '\n' + 
         dfv(3,headers,'') + ' = ' + xval_ori + ' ' + 
         dfv(4,headers,'') + ' = ' + yval_ori + '\n' + 
         ((opt1_val != ' ') ? dfv(5,headers,'') + ' = ' + opt1_val : '') + ' ' + 
         ((opt2_val != ' ') ? dfv(6,headers,'') + ' = ' + opt2_val : ''), 
         null 
        ]; 
       } 
       addRows.push(test); 
      } 
     }); 

     data.addColumn({type: 'string', role: 'tooltip'}); 
     data.addColumn({type: 'string', role: 'style'}); 
     data.addRows(addRows); 

     var options = { 
      title:  dov('title', paramObj, '(no title)'), 
      hAxis:  {title: dov('xLabel', paramObj, '')}, 
      vAxis:  {title: dov('yLabel', paramObj, '')}, 
      legend: dov('legend', paramObj, 'none'), 
      width:  dov('width', paramObj, 1200), 
      height: dov('height', paramObj, 800), 
      chartArea: {left:100,top:50,right:100,bottom:50} 
     }; 

     switch (dov('graphType', paramObj, 'scatter')) { 
      case 'scatter': 
       chart = new google.visualization.ScatterChart(document.getElementById(dov('container_id', paramObj, 'container'))); 
       break; 

      default: 
       break; 
     } 

     if (chart) { 
      chart.draw(data, options); 
      return true; 
     } 
     return false; 
    } 

Answer 1

는 각 축에 평균 점에서 선을 그릴
평균 시리즈에 대해 별도의 열을 추가

data.addColumn('number', 'AVG');

각 축에서 선을 그리기위한 데이터의 3 행 추가

var avgX = 50; 
var avgY = 50; 

data.addRows([ 
    [0, null, avgY], 
    [avgX, null, avgY], 
    [avgX, null, 0] 
]); 

는 또 다른 열을 추가 할 필요가 같은

google.charts.load('current', { 
 
    callback: drawChart, 
 
    packages: ['corechart'] 
 
}); 
 

 
function drawChart(transparent) { 
 
    var data = new google.visualization.DataTable(); 
 
    data.addColumn('number', 'X'); 
 
    data.addColumn('number', 'Y'); 
 

 
    for (var i = 0; i < 100; i++) { 
 
    data.addRow([ 
 
     Math.floor(Math.random()*100), 
 
     Math.floor(Math.random()*100) 
 
    ]); 
 
    } 
 

 
    // add average point 
 
    data.addColumn('number', 'AVG'); 
 

 
    var avgX = 50; 
 
    var avgY = 50; 
 
    data.addRows([ 
 
    [0, null, avgY], 
 
    [avgX, null, avgY], 
 
    [avgX, null, 0] 
 
    ]); 
 

 
    var options = { 
 
    series: { 
 
     // change average series to line 
 
     1: { 
 
     lineWidth: 2, 
 
     pointSize: 0 
 
     } 
 
    }, 
 
    legend: { 
 
     position: 'bottom', 
 
     textStyle: { 
 
     bold: true, 
 
     fontSize: 20 
 
     } 
 
    } 
 
    }; 
 

 
    var chartDiv = document.getElementById('chart_div'); 
 
    var chart = new google.visualization.ScatterChart(chartDiv); 
 
    chart.draw(data, options); 
 
}

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

Answer 2

나는 구글이 그래프 API의 옵션 배열에 그래프 API 자체에 흩어져에서 할 수있는 방법을 발견했다.

코드 아래 참조 :

base_x 및 base_y는 평균 x와 y 좌표 점이다

hAxis:  {title: 'title1', baseline:base_x, baselineColor:'red'} 
vAxis:  {title: 'title2', baseline:base_y, baselineColor:'red'} 

.

희망이 미래에 누군가를 돕고 우리는 아래와 같은 그래프를 얻을 것이다 :