是否可以将 x 轴和 y 轴绘制为 google 散点图中平均点的线

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

我确实从 google 散点图 API 本身在图 API 的选项数组中找到了一种方法。

见下面的代码：

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

其中 base_x 和 base_y 是平均 x 和 y 坐标点。

希望这对以后的人有所帮助，我们将得到如下图：

Answer 2

绘制从平均点到每个轴的线，
为平均值系列添加一个单独的列

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>

是否可以将 x 轴和 y 轴绘制为 google 散点图中平均点的线

Is it possible to plot x axis and y axis as line for an average point in google scattered plot

jquery

google-visualization

scatter-plot