Можно ли построить ось x и ось y как линию для средней точки в разбросанном графике графике

Question

У меня есть разрозненный график со всеми пунктирными линиями и средней точкой. Мне нужно нарисовать ось x и ось y для этой средней точки в разбросанном графике. Является ли это возможным? Ниже приведен фрагмент кода.

КОД:

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

добавить три строки данных для рисования линии от каждой оси, например

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

Я нашел способ сделать это с Google рассеянные сам граф API в массиве параметров графа API.

Смотрите ниже код:

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

где base_x и base_y являются средние х и у координатно-точки.

Надеется, что это поможет кому-то в будущем, и мы получим график, как показано ниже: