是否可以繪製x軸和y軸作爲谷歌散點圖中平均點的線

我有散點圖，繪製了所有點並繪製了平均點。我需要的是繪製散點圖中平均點的x軸和y軸。可能嗎？以下是我的代碼片段。是否可以繪製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; 
    }

來源

2016-11-07 Wolverine

聽起來像你只需要添加另一列，對於平均_series _...的 – WhiteHat

@WhiteHat遺憾也許是我的問題是缺少一個詞圖x軸和y軸「作爲一條線」。我已經用單獨的顏色繪製了平均值，但現在我需要繪製一條連接該平均點的線。 – Wolverine

@WhiteHat編輯我的問題與圖像有一個想法我正在做什麼來實現 – Wolverine

繪製從平均點線各軸，
對於普通系列添加一個單獨的列

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>

來源

2016-11-07 17:16:05 WhiteHat

驚人的:)我會嘗試這一個以及..無論如何，我沒有解決它使用基線選項在API中。 – Wolverine

基線工作太，假設你知道平均值... – WhiteHat

感謝您的代碼是的，我知道這個數據數組的平均值。 – Wolverine

我沒有找到一個辦法做到這一點從谷歌散圖形API本身在圖形API的選擇陣列。

見下面的代碼：

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

其中base_x和base_y是平均x和y座標的點。

希望這可以幫助別人在未來，我們會盡快圖如下圖所示：

來源

2016-11-07 17:15:33 Wolverine

是否可以繪製x軸和y軸作爲谷歌散點圖中平均點的線

回答

相關問題